6级力回流至底部

Question

我有一个连续的多个div和col 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>

如果您正在寻找自动排列元素(AKA Pinterest-like布局)，请考虑第三方解决方案，如砌体或同位素，否则您将不得不编写自己的插件。