使用Bootstrap的响应式Web设计：用于3列和2列网格布局的相等高度框

Question

我使用的是Bootstrap 3.2.0，我的网格设计有6个盒子。

前三个框的内容比最后三个框的内容更多。

对于大屏幕尺寸，我有3列布局，适用于中型屏幕尺寸2列和小1列1列。 1列布局不是问题，因为所有框都将垂直放置。

对于3列布局，方框1,2和3应位于一行中，高度相等。方框4,5和6也是如此：在第一排下方的一行中具有相同的高度。

对于2-colums布局，方框1和2应该是一个，方框3和4,5应该在一行中，方框6在左边的最后一行中。

您可以在此图片中看到我想要的内容：

我做了一个小提琴，所以你可以看到我做了什么： http://jsfiddle.net/5tJk3/

以下是代码段：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-sm-6 col-md-4">
            <div class="bs-grid-big">
                Box 1
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="bs-grid-big">
                Box 2
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="bs-grid-big">
                Box 3
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="col-sm-6 col-md-4">
            <div class="bs-grid-small">
                Box 4
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="bs-grid-small">
                Box 5
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="bs-grid-small">
                Box 6
            </div>
        </div>
    </div>
</div>

使用Bootstrap有一种简单的方法吗？我认为2栏的布局很难让箱子4和5与箱子3的高度相等。

Answer 1

您可以使用精彩的.hidden-sm .clearfix组合技巧，将其放在第5列之后的空div中。它将仅在sm设备上清除，将第6列放在左侧。无需自定义CSS。

<div class="visible-sm clearfix"></div>
 <div class="col-sm-6 col-md-4">Column 6 Lorem Ipsum
...

演示：http://www.bootply.com/mYKLVnKl0k

Answer 2

这就是我所做的 我把固定高度放在.bs-grid-big和它的一半到.bs-grid-small +额外20px到.bs-grid-big，因为你的h2里面很小，它给出了20px的上边距。

(http://jsfiddle.net/5tJk3/1/)

这是你想要的吗？ 你应该看看jquery匹配高度插件

(http://brm.io/jquery-match-height/)