angular 10 bootstrap - 在 *ngfor 循环中连续显示 5 列答案

【问题标题】：angular 10 bootstrap - display 5 columns in a row in the *ngfor loopangular 10 bootstrap - 在 *ngfor 循环中连续显示 5 列
【发布时间】：2021-02-19 16:17:47
【问题描述】：

我想连续显示 5 列。如果我使用 col-2，则渲染 6 列，如果我使用 col-3，则渲染 4 列。如何显示 5 列？

<div class="row">
        <div class="col-2"  *ngFor="let control of controls; let i=index;">
           {{contol.data}}
        </div>
</div>

【问题讨论】：

标签： angular-ui-bootstrap angular10

【解决方案1】：

您可以使用 col-auto 类，它会根据屏幕大小自动调整列，或者您可以为 5 列创建自己的 col 类，如下所示：

   .col {
      flex: 0 0 20%;
      max-width: 20%;
    }

【讨论】：

【解决方案2】：

您可以使用列类 col 代替 col-2。请看下面的代码。

<div class="row">
    <div class="col"  *ngFor="let control of controls; let i=index;">
        {{contol.data}}
    </div>
</div>

我希望这会对你有所帮助。谢谢。

【讨论】：