Bootstrap 3 个不同高度的响应列

Question

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

我有 8 个定价表都是相似高度接近400px，最大（红色方块）为430px，最小为390px

响应式 class 列：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>

如何防止列被推入 "new row"，即所有列都包含在同一个 div.row 标记中，因此它们可以做出响应。但是在第二组列中，前两个 "slots" 被跳过，但是第三行（未显示）像正常一样开始。

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

问题图解：

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

Answer 1

你可以巧妙地使用媒体查询，并根据分辨率大小清除下一行中的第一项。

.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 断点。

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

其余断点也一样。我会注意到我还在必要时将 clear 重置为 clear: none，这样之前的目标就不会在错误的分辨率下中断。

Answer 2

我很清楚你在说什么，因为我运行也遇到过同样的问题。我不知道ruby，但答案很简单：

使用带有计数器的 for 循环 i
当 i % 4 == 0 时，在 <div class='col'>.

<%= </div><div class="row"> %>

这样，每 4 个条目，class='row' 将停止并创建一个新条目。最后一行不会影响下一行， class='col' 也不会受到影响。这在屏幕尺寸减小时也有效。

Answer 3

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

Answer 4

另一种方法是像这样使用 CSS column-width..

.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

Bootstrap 3 个不同高度的响应列

Bootstrap 3 responsive columns of varying heights

html

css

multiple-columns

twitter-bootstrap-3

问题图解：

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