ブートストラップ ボックス化されたコンテンツを含む 2 つの全画面背景列を作成するにはどうすればよいですか?

画面の端まで広がる異なる背景色の 2 つの列を取得します

問題を理解する

目標は、異なる背景色を持つ 2 つの列が画面の端まで広がる Web ページ レイアウト。列内のコンテンツは定義された範囲内に留まります。 bootstrap boxed width.

Bootstrap 3 の解決策

Bootstrap 3 で推奨されるアプローチは、2 番目のコンテナーの周囲に別のラッパー DIV を使用することです。これにより、2 番目のコンテナが最も外側のラッパーの幅を継承し、ラッパーの背景色を画面の端まで拡張できるようになります。

<div class="container">
<p><strong>ブートストラップ 4 および 5 のソリューション</strong></p> <p>ブートストラップ 4 および 5 では、コンテナ流体クラスを使用し、外側の列内に小さなグリッド列をネストして、目的の効果を実現します。</p>
<pre class="brush:php;toolbar:false"><!-- Bootstrap 5 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-info">
      <div class="row justify-content-end">
        <div class="col-9">...</div>
      </div>
    </div>
    <div class="col-6 bg-danger">
      <div class="row justify-content-start">
        <div class="col-9">...</div>
      </div>
    </div>
  </div>
</div>
<!-- Bootstrap 4 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-info">
      <div class="row justify-content-end">
        <div class="col-9">...</div>
      </div>
    </div>
    <div class="col-6 bg-danger">
      <div class="row justify-content-start">
        <div class="col-9">...</div>
      </div>
    </div>
  </div>
</div>

追加オプション

同様の効果を実現する別の方法は、.right:before などの疑似要素を使用して、コンテナの幅を超えて広がる色付きの背景の外観を作成します。

.right:before {
  right: -999em;
  background: rebeccapurple;
  content: '';
  display: block;
  position: absolute;
  width: 999em;
  top: 0;
  bottom: 0;
}

このメソッドは Bootstrap 3 にも適用できます。以降のバージョン。