不同高度的Bootstrap 3响应列

Question

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

我有8个定价表 它们都是相似的高度接近400px，最大（红色方块）为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个col之后，2个用于sm，4个用于lg，你可以添加一个带有样式的div＆＃34; clear：both＆＃34;使用mod（％）。

Answer 2

您可以熟悉媒体查询，并根据分辨率大小清除下一行中的第一项。

.regular {
    background: gray;
    height: 350px;
    margin-bottom: 30px;
}
.tall {
    background: red;
    height: 500px;
    margin-bottom: 30px;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .fix-row > div:nth-child(3) {
        clear: left;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .fix-row > div:nth-child(3) {
        clear: none;
    }
    .fix-row > div:nth-child(4) {
        clear: left;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .fix-row > div:nth-child(3) {
        clear: none;
    }
    .fix-row > div:nth-child(4) {
        clear: none;
    }
    .fix-row > div:nth-child(5) {
        clear: left;
    }
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row fix-row">
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="tall">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
</div>

JSFiddle示例： http://jsfiddle.net/tkL8edwj/

工作原理：

我正在使用媒体查询来确定最后一个行项目的时间，然后使用CSS伪选择器nth-child(n)来指定行中的最后一项。

由于您对网格项类使用col-lg-3，col-md-4和col-md-6，因此我可以根据默认的Bootstap断点了解下一行中的第一项。< / p>

col-lg-4在某一点（1200px）中断，因为您使用的是4，我知道该行中有3个项目（12/4 = 3）。这意味着我可以定位行中的每个 5th div并获取每行的第一项，然后使用clear: left确保它清除之前div的浮动。

其他断点也是如此。我会注意到，我还会在必要时将clear重置为clear: none，以便之前的目标不会在错误的分辨率下中断。

Answer 3

另一种方法是使用像这样的CSS列宽..

.row {
 -moz-column-width: 20em;
 -webkit-column-width: 20em;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 
}

.row > .col-lg-3 {
 display: inline-block;
 padding: 0;
 margin: 10px;
 width: 100%; 
 float:none;
}

演示： http://bootply.com/jFdfbBgkv6

Answer 4

我确切地知道你在说什么，因为我遇到了同样的问题。我不知道红宝石，但答案很简单：

1. 使用for循环和计数器i
2. 当i % 4 == 0时，请在<%= </div><div class="row"> %>。
之后打印：<div class='col'>

这样，每隔4个条目class='row'将停止并创建一个新条目。最后一行不会影响下一行，class='col'不会受到影响。当屏幕尺寸降低时，这也适用。