0

私は流体に反応するブートストラッププロジェクトで働いています。私には4つのスパンがあります。私の目標は、4x1、2x2、1x4の順に表示することです。3x1+1を移行せずにこれを行うのに問題があります。

それをグラフィカルに表示するには：

レスポンシブデザインターゲット

私が見つけた唯一の動作するコードは以下のとおりです。4x1レイアウトでは、アイテム2と3の間に広いスペースが残ります。

<div class="container-fluid">
    <div class="span11">
        <div class="span5">
            <h2>Item 1</h2>
        </div>
        <div class="span5">
            <h2>Item 2</h2>
        </div>
    </div>
    <div class="span11">
        <div class="span5">
            <h2>Item 3</h2>
        </div>
        <div class="span5">
            <h2>Item 4</h2>
        </div>
    </div>
</div>
4

2 に答える 2

0

デフォルトのブートストラップグリッドは12列です。カスタマイズしましたか？もしそうなら、そのコードを共有します。カスタマイズして11列のグリッドを使用している場合でも（ちなみにこれは悪い考えのようです）、11列のコンテナー内で合計10個のスパンのみを使用しています。

ブートストラップの流体グリッドでは、スパンをネストする適切な方法がここにあります。

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <div class="span6"></div>
                <div class="span6"></div>
            </div>
        </div>
    </div>
</div>

ここで重要なのは、ネストするときに、新しい行-流体divを開く必要があるということです。あなたの場合、2つのボックスだけを気にするなら、最初の行からそれらの.spansを実行することができます-流体divであり、全量のスパンクラスを指定することさえできません。また、各行の内部スパンクラスを合計して列の総数にすることを忘れないでください

于 2013-01-22T09:39:31.023 に答える
0

このためにカスタムグリッドサイズを作成します。LESSに精通している場合は、grid.lessファイルを編集するか、次のようなものを追加できます。

.col-quarter {
  width: 25%;
  float: left;
}
.col-half {
 width: 50%;
 float:left;
}
.col-third {
 width: 33%;
 float:left;
}

これはパディングとマージンを考慮していませんが、出発点です。

于 2014-09-18T22:13:33.523 に答える