1

Twitter Bootstrap を使用してレスポンシブ レイアウトを作成しようとしています。幅 1、2、または 4 の行で表示したい画像 (100x100) の「グリッド」があります。「.container-fluid」内で「.row」を使用してから、span3 を使用して各アイテムを行内に格納しています。

<div class="container-fluid">
    <div class="row">
             <div class="span3 product"><img src="//placehold.it/100x100"></div>
             <div class="span3 product"><img src="//placehold.it/100x100"></div>

             <div class="span3 product"><img src="//placehold.it/100x100"></div>
             <div class="span3 product"><img src="//placehold.it/100x100"></div>
    </div>
    <div class="row">
             <div class="span3 product clearfix"><img src="//placehold.it/100x100"></div>
             <div class="span3 product"><img src="//placehold.it/100x100"></div>

             <div class="span3 product"><img src="//placehold.it/100x100"></div>
             <div class="span3 product"><img src="//placehold.it/100x100"></div>
    </div> 
</div>

問題は、ブラウザを特定の幅にリサイズすると、レイアウトが不均一に変化することです。たとえば、ビューポートの幅が 769px から 795px の場合、3 つのアイテムを含む行と、1 つのアイテムを含む次の行を取得します。2 つまたは 4 つのアイテムの「偶数」行が必要です。Bootply のデモを参照してください。

Bootstrap をそのまま使用する方法はありますか? または、このレイアウトを取得するためにカスタム ビューポート計算が必要ですか?

4

3 に答える 3

1

.row div のクラスを .row-fluid に変更します。

これにより、4 つのアイテムが連続して表示されるか、特定のポイントを超えてウィンドウを縮小すると 1 つだけが表示されるようになります。3つのアイテムが連続してそのようなことをすることは決してありません。

于 2013-05-03T23:46:52.743 に答える
0

Vijay Ramamurthy が言ったように、行のクラスを row-fluid に変更します。

または、必要に応じて isotope プラグインを使用してギャラリーに合わせます: http://isotope.metafizzy.co/

于 2013-05-05T23:32:26.177 に答える
0

コードの途中の部分を削除して、ブラウザにレイアウトを処理させてみませんか? これにより、アイテムを適切に積み重ねることができます。最小幅を指定して、小さくなりすぎないようにすることもできます。

タイル化されたアイテムを行にラップすると、アイテムは常に新しい行に切れ目を作成し、それを削除すると、レイアウトを不均一にするアイテムが他のアイテムの横に浮かび上がります。

于 2013-05-05T23:07:24.457 に答える