1

1 つの行にcol-sm-6を含む複数の div があります。セットアップでは、1 番目、3 番目、および連続する div の高さがかなり低く、2 番目の div の高さがはるかに高くなっています。

最初のものが左に、2 番目が右に、3 番目が最初の下の左に、div がリフローすることを期待しています。これを行いますが、3 番目の div の上部は 2 番目の 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 を書かなくても、これを簡単に修正する方法はありますか?

4

1 に答える 1

0

左の列に「特定の要素」 、右の列に「その他の要素」が必要な場合は、2 つの列を使用します。

<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などのサード パーティのソリューションを検討するか、独自のプラグインを作成する必要があります。

于 2013-10-02T08:26:19.043 に答える