多个col-sm-6强制回流到底部

Question

我在一排有多个div和col-sm-6 。 该设置的第一个，第三个和连续的div高度都非常小，而第二个的高度更高。

我期望div重新排列，第一个在左侧，第二个在右侧，第三个在第一个下方。 它做到了，但第三个div的顶部与第二个div的底部一致。 我期望它上升到第一个的底部。

<div class="row row-fluid">
    <div class="col-sm-6" style="min-height: 30px">1</div>
    <div class="col-sm-6" style="min-height: 90px">2</div>
    <div class="col-sm-6" style="min-height: 20px">3</div>
    <div class="col-sm-6" style="min-height: 40px">4</div>
</div>

我构建了一个jsFiddle来尝试显示问题： http : //jsfiddle.net/G7atf/1/

有没有一种方法可以轻松解决此问题而无需编写自己的JS？

Answer 1

如果要在左列使用“某些元素”而在右列使用“其他元素” ，则只需使用两列：

<div class="row">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-12">
            </div>
            <!-- more items here -->
        </div>
    </div>
    <div class="col-sm-6">
        <div class="row">
        </div>
            <div class="col-sm-12">
            </div>
            <!-- more items here -->
    </div>
</div>

如果您正在寻找自动安排元素的方式（也称为Pinterest之类的布局），请考虑使用Masonry或Isotope之类的第三方解决方案，否则您必须编写自己的插件。