Bootstrap 3响应列不同高度 [英] Bootstrap 3 responsive columns of varying heights

问题描述

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

EDIT The pricing tables' content will all be dynamically generated, I cannot predict their height, I'm simply using the 400px case for the diagram. So I can't set a static height to each column as a fix.

我有8个定价表
他们都是类似高度接近400像素，最大（红色方块）为430像素，最小为高度390像素。

I have 8 pricing tables They are all similar heights close to 400px, with the largest (red square) being 430px and the smallest at a height of 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>

如何防止将列推送到新行 ie
所有列都包含在同一个 div.row 标记中，以便他们可以做出响应。
但是在第二组列中，前两个槽被跳过，第三行（未示出）开始像正常。

How do I prevent columns being pushed off into "new row", i.e. All the columns are contained in the same div.row tag so they can act responsively. But in the second set of columns, the first two "slots" are skipped, the third row (not shown) begins like normal however.


因此，响应方面的工作和列向下折叠。

IMPORTANT THAT THEY'RE ALL IN THE SAME .row OBJECT So that responsive aspect works and columns collapse down.

推荐答案

after 3 cols for md，2 for sm，4 for lg，你可以使用mod（％）添加一个带有clear：both样式的div。

after 3 cols for md, 2 for sm, 4 for lg, you can add a div with style "clear:both" using mod (%).

这篇关于Bootstrap 3响应列不同高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！