Bootstrap - 让内容换行答案

【问题标题】：Bootstrap - Make content go to a new lineBootstrap - 让内容换行
【发布时间】：2020-04-06 22:19:28
【问题描述】：

我正在尝试定义特定布局来呈现对象列表。
我正在使用 angular 和 bootstrap，我想使用 for 循环 (ngFor) 在列表中循环。
表格的每一行应包含三个元素。
这就是它的样子（网格内数组的索引）：

|-------------|-------------|-------------|
|      0      |      1      |      2      |
|-------------|-------------|-------------|
|      3      |      4      |      5      |
|-------------|-------------|-------------|
[...]
|-------------|-------------|-------------|
|     n-1     |      n      |    empty    |
|-------------|-------------|-------------|

我知道我可以结合 bootstrap row 和 bootstrap col 将数组分成每行三个元素。
但我想知道是否有一种方法可以在不使用引导行的情况下在新行中呈现第 4 个元素（以及第 7 个等）。
我的意思是，有没有办法定义列表容器的宽度，以便在满足其宽度时下一个元素进入新行？
这将大大简化 for 循环的结构。

【问题讨论】：

标签： angular bootstrap-4

【解决方案1】：

您不需要新的row。阅读docs...

"如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行。”

   <div class="row">
        <div class="col-4">
            1
        </div>
        <div class="col-4">
            2
        </div>
        <div class="col-4">
            3
        </div>
        <div class="col-4">
            4
        </div>
        ...
    </div>

https://codeply.com/p/pRaYHIjdNv

Bootstrap 3 - Use more than 12 columns in a row

【讨论】：

【解决方案2】：

我试图猜测您的问题并编写解决方案
您想在新行中显示新元素，为此您可以编写如下代码

<div class="row">
        <div class="col-md-4">test 1</div>
        <div class="col-md-4">test 2</div>
        <div class="col-md-4">test 3</div>
</div>
<div class="row">
        <div class="col-md-4">test 5</div>
        <div class="col-md-4">test 6</div>
        <div class="col-md-4">test 7</div>
        <div class="col-md-4">test 8</div>
</div>

所以从上面的代码中，“test 8”将显示在新行中
如果这是您的预期或我不明白，请告诉我

【讨论】：