html - Bootstrap 3 不同高度的响应列

Question

编辑 定价表的内容将全部动态生成，我无法预测它们的高度，我只是使用图表的 400px 大小写。所以我无法为每一列设置静态高度作为修复。

我有 8 个定价表 它们的高度都相似接近 400px，最大的(红色方 block )为 430px，最小的为 390px。

列的响应类:class="col-lg-3 col-md-4 col-sm-6"

HTML 布局:

<div class="row">
    <% columns.each do |column| %>
        <div class="col-lg-3 col-md-4 col-sm-6">
            CONTENT
        </div>
    <% end %>   
</div>

如何防止列被插入“新行”，即 所有列都包含在同一个 div.row 标记中，因此它们可以响应。 但在第二组列中，前两个“插槽”被跳过，第三行(未显示)开始时与正常情况一样。

重要的是它们都在同一个 .row 对象中 这样响应方面就可以工作并且列会崩溃。

问题图:

我想要的是更像这样的东西:

Answer 1

在 md 3 列、sm 2 列、lg 4 列之后，您可以使用 mod (%) 添加样式为“clear:both”的 div。