Question

我在一个行中有多个带 col-sm-6 的div。设置将第一个，第三个和连续的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 - 就像布局），请考虑第三方解决方案，例如Masonry或Isotope，否则您必须自己编写插件。

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

1 个答案: