ブートストラップを使用して、背景色が異なる全画面 2 列レイアウトを作成するにはどうすればよいですか?

画面の端まで広がる異なる背景色の 2 つの列を作成する方法

問題:

ウェブページ上に 2 つの列を作成し、それぞれに異なる背景色を付け、画面全体に拡張したいと考えています。エッジ。ただし、列の内容は、Bootstrap グリッド システムの固定幅内に収まるようにする必要があります。

解決策:

Bootstrap 5 ベータ版の使用:

Bootstrap でもコンセプトは同様です5:

• 列上の絶対位置を持つ疑似要素を使用して、コンテナ流体内にコンテナの錯覚を作成します。

ブートストラップ 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>

ブートストラップ 5 の代替:

• コンテナー流体を利用し、外側の列内に小さなグリッド列を挿入します。背景色。

を使用Bootstrap 4:

概念は Bootstrap 5 に似ていますが、「-xs-」接尾辞がありません。

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>

ブートストラップの使用3:

別のラッパー内で 2 番目のコンテナをラップします DIV:

<div class="container">
<p><strong>ブートストラップでの疑似要素の利用 3:</strong></p>
<pre class="brush:php;toolbar:false">.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}