31

私はブートストラップが初めてです。次の画像のように、高さが異なり、幅が同じ流体グリッド システム グリッドを使用したいと考えていますブートストラップ グリッド イメージ。

どうすれば同じものを実装できますか? 私を助けてください。

4

5 に答える 5

38

Bootstrap を「すぐに使える」状態でこれを行う唯一の方法は、4 つの列を使用し、それぞれに項目を積み重ねることです。これは、各列に含まれるアイテムの数がわからない動的コンテンツには適していません。また、項目は左から右ではなく、上から下に並べられます。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        <!--item1-->
        <!--item2-->
        <!--item3-->
        <!--item4-->
        </div>
        <div class="col-md-3">
        <!--item5-->
        <!--item6-->
        <!--item7-->
        <!--item8-->
        </div>
        <div class="col-md-3">
        <!--item-->
        <!--item-->
        <!--item-->
        </div>
        <div class="col-md-3">
        <!--item-->
        <!--item-->
        <!--item-->
        <!--item-->
        <!--item-->
        </div>
      </div>
</div>

それ以外の場合は、 MasonryやIsotope などの jQuery プラグインを使用するか、CSS3 マルチカラムを使用する必要があります。

Jquery プラグイン メソッド

Bootstrap Masonry デモ
Bootstrap Masonry デモ 2

CSS3 カラム方式 (Masonry のような CSS ソリューション)。

これは Bootstrap 3 固有のものではなく、CSS の複数列を使用する別のアプローチです。このアプローチの欠点の 1 つは、列の順序が左から右ではなく上から下になることです。

CSS3 の複数列のデモ

同様の質問に対するこの回答には、より詳細な情報もあります。

2018年アップデート

Bootstrap 4には、CSS3 マルチカラムを使用した Masonry のようなソリューションが含まれています: Masonry cards Demo

于 2013-10-08T10:15:16.053 に答える
1

これを html のサンプル本文にコピーすると、説明するよりも理解しやすくなります。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12" style="height:100px; background-color:red"></div>    
                <div class="col-md-12" style="height:100px; background-color:yellow"></div>
                <div class="col-md-12" style="height:100px; background-color:gray"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12" style="height:200px; background-color:blue"></div>       
                <div class="col-md-12" style="height:100px; background-color:black"></div>
            </div>
        </div>      
    </div>
</div>
于 2016-02-25T09:42:27.377 に答える
0

ご覧のとおり、列の幅が固定されています。だからあなたは書くことができます

<div class="col-xs-4">
  boxes
</div>
<div class="col-xs-4">
 boxes
</div>
<div class="col-xs-4">
boxes
</div>
于 2016-01-08T12:21:32.507 に答える