Html 具有引导功能的响应性Web设计：用于3列和2列网格布局的等高框

我使用的是Bootstrap3.2.0，我有一个带有6个盒子的网格设计

前三个框的内容比后三个框的内容多

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

对于三列布局，框1、2和3应放置在一行中，高度相等。方框4、5和6的情况相同：第一行下方一行，高度相等

对于2列布局，方框1和2应在一行中，方框3和4,5应在一行中，方框6应在左侧的最后一行中

你可以在这张照片中看到我想要的：

我做了一把小提琴，你可以看到我做了什么：

以下是代码片段：

<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>

方框1
方框2
方框3
方框4
方框5
方框6

有没有一种简单的方法可以通过引导实现这一点？我认为两列布局将很难使方框4和5与方框3的高度相等。

以下是我所做的 我把固定的高度放在.bs网格大的一半到.bs网格小的一半+额外的20px到.bs网格大的一半，因为你有h2在小的里面，它给了利润最高20px

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

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

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

---

您可以使用awesome

.hidden sm.clearfix

组合技巧，将其放在第5列后面的空div中。它将只在sm设备上进行clearfix，将您的第6列放在左侧。不需要定制CSS

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

第6列同侧眼线
...

---

演示：

您可以在jQuery/JavaScript的帮助下完成此操作。。。这仅仅是因为当你改变屏幕尺寸的时候，你需要不断地调整盒子的高度。但是这仅仅是一行吗？我可以使用一些像这个网页上显示的技术，对吗？有适合我的场景的JavaScript库吗？内容是动态的，框的高度也是如此。所以我不能设定固定的高度，我想让它反应灵敏。第二个链接似乎很有趣，因此我可以实现3列布局，但我不知道如何使用框4和框5与框3高度相同的2列布局。您可以使用jquery读取大div的高度，将其除以2，并将该数字设置为较小divI的高度集成

jQuery匹配高度

：它适用于1列和3列布局。问题在于2列布局。有没有一个默认的方法来使用这个小库呢？我是用这个插件和一些计算来实现的：你觉得怎么样？在这里你可以看到新版本，Safari的一些计算有一个小错误。感谢您对

jquery match height

的提示。但是，如果所有的框都因为内容不同而有不同的大小，那么它们的对齐就不是很好了吗？我更改了内容，但它似乎不是我想要的：没有等高列。我做了一个JSFIDLE，它可以工作，但不幸的是，有很多JavaScript和库：我明白了。我没有意识到这样一个事实，即您希望框4和框5占据与框3相同的垂直空间，无论其内容如何。尽管它们位于同一行上，就像您所希望的那样，所以我打赌将需要更少的js和自定义css使它们具有相同的高度。。。