ブートストラップ行をコンテナを超えて拡張するにはどうすればよいですか?

コンテナを越えてブートストラップ行を拡張する

問題の説明

ブートストラップのグリッド システムは、レスポンシブ レイアウトを作成する便利な方法を提供します。ただし、場合によっては、要素をコンテナの幅を超えて拡張する必要がある状況が発生することがあります。これにより、目的のデザインを達成する際に課題が生じる可能性があります。

解決策

オプション 1: CSS 擬似要素を使用する

次のコマンドを使用して擬似 ::before 要素を作成します。コンテナの幅を超えて広がる負の左オフセット。この要素は、ターゲット要素をコンテナの外に押し出すスペーサーとして機能します。

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

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

オプション 2: 絶対位置のコンテナを使用する

次のコンテナ流体を使用します。 「ゴースト」として機能するプライマリ コンテナの後ろの画面端まで広がる絶対配置コンテナ。

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

追加リソース

• [Codeply のデモ (オプション 1)](http://codeply.com/go/C80RYwhWrc)
• [ Codeply のデモンストレーション (オプション) 2)](https://codeply.com/go/txUHH72f16)
• [関連例: 画面の端まで広がる異なる背景色の 2 つの列を取得する](https://stackoverflow.com/a/ 35627548)

以上がブートストラップ行をコンテナを超えて拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。