ブートストラップ要素をコンテナの境界を越えて拡張するにはどうすればよいですか?

Bootstrap でのコンテナ境界を越えた要素の拡張

Bootstrap では、コンテナ クラスによってコンテンツ領域の幅が決まります。ただし、特定のデザインでは、このコンテナを超えて拡張する要素が必要になる場合があります。これを実現する方法は次のとおりです。

CSS 擬似要素の使用

オーバーフロー要素内に CSS 擬似 ::before 要素を作成します。オーバーフローした div に合わせて高さも変更されます。

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

例:

<div class="container">
    <div class="row">
        <div class="col-lg-6 left">
            ...
        </div>
    </div>
</div>

絶対配置コンテナーの使用

Position a 。コンテンツコンテナの後ろにあるcontainer-fluid（全角）。境界を越えて広がる「幽霊」として機能します。

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

例:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="image.jpg">
        </div>
    </div>
</div>

同様のお問い合わせ:

• 画面の端まで広がる異なる背景色の 2 つの列を取得
• 例画像右の例
• 画像左の例
• ブートストラップ コンテナを超えて要素を拡張します

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