ブートストラップを使用して異なる背景色を持つ全幅の列を作成するにはどうすればよいですか?

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

このレイアウトを実現するには、コンテナーの組み合わせを使用する必要があります異なる背景色と絶対位置を使用します。

ブートストラップ5

オプション 1: 擬似要素アプローチ

• コンテナ流体を使用してラッパー コンテナを作成し、ビューポート全体を埋めます。
• 絶対配置で列に疑似要素を使用して、オブジェクト内にコンテナのような錯覚を作成します。 container-fluid.

オプション 2: ネストされたグリッド アプローチ

• container-fluid をメイン コンテナとして使用します。
• ネスト外側の列の内側にある小さなグリッド列。それぞれに独自の背景があります。 color.

ブートストラップ 4 および 3

• コンテナを使用してラッパー コンテナを作成します。
• ラッパー内に別のコンテナを作成します必要に応じて背景色を設定します。
• マージンとパディングを調整してください。希望のレイアウトを実現します。

追加オプション: 擬似要素テクニック

あるいは、擬似要素を使用して、画面に広がる色付きの背景を作成することもできます。角。例:

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

この手法は、画面の端まで広がる色付き領域を作成するためのより柔軟なアプローチを提供しますが、コンテンツの重なりを避けるために位置を慎重に検討する必要があります。

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