web-dev-qa-db-ja.com

Bootstrap 4を含む行内の複数の行

ブートストラップを使用して全幅のページを作成しようとしています。私はこれに似た設定をしています：

<body>
    <div class="container-fluid">
        <div class="row">
            The first row goes here
        </div>
        <div class="row">
            The second row goes here
        </div>
        <div class="row">
            The third row goes here
        </div>
    </div>
</body>

行内に行を作成したい場合、どうすればよいですか？これは私が達成しようとしていることです：

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="row text-center">
                <h1>Some title</h1>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-4">
                    Grid perhaps
                </div>
                <div class="col-md-4">
                    More grid
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
</body>

したがって、基本的には、1つの行にタイトルを配置し、別の行にいくつかのグリッドを配置したいと思います。ここで注意が必要なのは、幅が4列の列を中央に配置し、左右に「2列のパディング」を配置することです。

私の質問は他の質問のように聞こえるかもしれませんが、パディングのためにユニークです。このレイアウトを適切に作成するにはどうすればよいですか？

htmlcsstwitter-bootstraptwitter-bootstrap-4
6
MortenMoulder

ブートストラップには、すべてのデバイスのコンテンツに「自然な」（margins + paddings）を提供するスマートな（ただしデリケートな）ガターシステムがあります 1。

このシステムは、2つの単純な仮定に基づいています。

  • 列は.rowsの直接の子です 2
  • コンテンツは列内に配置されます

そのため、.rowを別の.row内に配置したい場合（列の1つをさらに分割するため）、次のマークアップを使用する必要があります。

<div class="row">
  <div class="col-12">
     <div class="row">
        <div class="col-md-4 offset-md-2">
           Grid perhaps
        </div>
        <div class="col-md-4">
           More grid
        </div>
     </div>
  </div>
</div>

上記はそれ自体ではあまり意味がありません（子行のマークアップを使用するだけで同じ結果が得られます）。ただし、次のように、レイアウトの領域全体をオフセット（または制限）する場合に便利です。

<div class="row">
  <div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
     <div class="row">
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
     </div>
  </div>
</div>

実際の例については this fiddle を参照してください。

1 Bootstrapのガター（v4）を取り除くには、no-guttersに.rowクラスを適用する必要があります。

2 これは「一般原則」であり、「厳密な規則」ではありません。他の要素は、.rowsの直接の子として許可されます（推奨されます）（ column breaks など）。もう一方の端では、他の要素が.rows（.form-rowsなど）から拡張されるため、ガターシステムを継承し、有効な列の親になります。

14
tao