ボックス化された幅を維持しながらブートストラップ列の背景色を拡張するにはどうすればよいですか?

Bootstrap を使用した背景色の拡張

Bootstrap を使用すると、異なる背景色の列を持つ Web サイトを作成できます。ただし、この機能を実装する場合、特に大きな画面では、コンテンツが定義されたブートストラップ ボックスの幅内に収まるようにすることが重要です。

ブートストラップ 5:

ブートストラップ内5、希望の背景を持つ列上に絶対に配置された疑似要素を使用しますcolor:

<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:

ブートストラップ 3 では、2 番目のコンテナーの周囲に追加のラッパー DIV を使用します:

<div class="container">

擬似的な例要素:

Bootstrap 3 の場合、疑似要素を使用して目的の効果を作成することもできます:

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

以上がボックス化された幅を維持しながらブートストラップ列の背景色を拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。