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

Question

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

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

ただし、これは可能ではないようです。または、正しく実行していないだけですか?

Answer 1

ブートストラップ バージョン 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

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

Answer 2

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

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

これは、異なる画面サイズでページを表示する場合に便利です。

小さな画面では、可能であれば、小さな内側の列を維持しながら、大きな外側の列のラッピングが行われます。