ブートストラップグリッドシステムでネストされた行？

次のような2x2形式の1つの大きな画像と4つの小さな画像が必要です。

私の最初の考えは、すべてを一列に収めることでした。次に、2つの列を作成し、2番目の列で2つの行と2つの列を作成して、1x1と2x2の効果を作成します。

しかし、これは可能ではないようです、または私はそれを正しく行っていませんか？

ブートストラップバージョン3.x

いつものように、Bootstrapの素晴らしいドキュメントを読んでください：

3.xドキュメント：https : //getbootstrap.com/docs/3.3/css/#grid-nesting

親レベルの行が.container要素内にあることを確認してください。行を入れ子にしたいときはいつでも.row、列の中に新しいものを開くだけです。

作業するためのシンプルなレイアウトは次のとおりです。

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

ブートストラップバージョン4.0

4.0ドキュメント：http : //getbootstrap.com/docs/4.0/layout/grid/#nesting

これは4.0の更新バージョンですが、グリッドのドキュメントセクション全体を読んで、この強力な機能を活用する方法を理解する必要があります。

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Fiddle jsFiddle 3.xのデモ| jsFiddle 4.0

これは次のようになります（スタイリングが少し追加されています）：

@KyleMitの発言に加えて、次の使用を検討してください。

• col-md-* 大きな外側の列のクラス
• col-xs-* 小さい内部列のクラス

これは、さまざまな画面サイズでページを表示する場合に役立ちます。

小さな画面では、可能であれば、小さな内部列を維持しながら、大きな外部列の折り返しが行われます。