twitter-bootstrap => グリッドネスト

前書き

ブートストラップでは、他の列の中でグリッド列を使用することができます。これは、複数のグリッド層を使用する高度な応答レイアウトを作成する場合に役立ちます。

備考

上記の方法でできるだけ多くの列を持つことができます。

列のネスト

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

この例は、[ http://getbootstrap.com/css/#grid-nesting] [1 ]

公式ウェブサイトの文書が示唆するように

既定のグリッドでコンテンツをネストするには、既存の.col-sm- *列内に新しい.rowと.col-sm- *列のセットを追加します。ネストされた行には、最大12個以下の列が含まれている必要があります（12個の使用可能な列をすべて使用する必要はありません）。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

twitter-bootstrap
グリッドネスト

サーチ…

前書き

備考

列のネスト