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

Question

我想连续显示 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>

Answer 1

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

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

Answer 2

您可以使用列 class col 而不是 col-2。请查看以下代码。

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

希望对您有所帮助。谢谢。

angular 10 bootstrap - display 5 columns in a row in the *ngfor loop