web-dev-qa-db-ja.com

ブートストラップグリッドシステムで入れ子になった行

私はこのように2x2フォーマットで4小さい画像と1大きい画像が欲しいのです：

Figure 1 Example

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

しかし、これは可能ではないようです、または私はちょうどそれを正しくやっていないのですか？

csshtml5twitter-bootstrapgridgrid-system
175
Greg

ブートストラップバージョン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用の更新版ですが、この強力な機能をどのように活用するかを理解できるように、グリッド上のdocsセクション全体を実際に読む必要があります。

<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

これは次のようになります（、スタイルを少し追加した）。

screenshot

274
KyleMit

@KyleMitが言ったことに追加：

  • もっと大きいクラスにはcol-md-*クラスを使うことを検討してください。
  • 小さい方の外部列とcol-xs-*クラス
  • インナーコラム

あなたが異なる画面サイズでページを見るとき、これは役に立ちます。小さな画面では

  • 大きいのラッピング
  • 小さい方を維持しながら外側の列が発生します
  • 可能であれば内側の列
4
ezzadeen