[解決済み】bootstrapのグリッドシステムでネストされた行？

質問

大きな画像1枚に小さな画像4枚を2x2のフォーマットで表示したいのですが、どうすればよいですか？

最初に考えたのは、1列にすべてを収容することでした。そして2列を作り、2列目には2行2列を作り、1x1や2x2の効果を生み出します。

しかし、これはできないようです。それとも、私のやり方が悪いだけでしょうか？

解決方法を教えてください。

Bootstrapバージョン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

このように表示されます ( を追加し、少しスタイリングしています。 ):