如何使用 Bootstrap 創建具有不同背景顏色的全螢幕兩欄佈局？

如何建立跨越螢幕邊緣的兩列不同背景顏色的欄位

問題：

問題：

問題：

您希望在網頁上建立兩列，每列都有不同的背景顏色，延伸到螢幕的邊緣。但是，列的內容應保持在 Bootstrap 網格系統的固定寬度內。

解：

使用 Bootstrap 5 Beta：

Bootstrap中的概念仍然相似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>

在列上使用具有絕對位置的偽元素來創建容器流體中容器的錯覺。

Bootstrap 5 範例Beta:

Bootstrap 5的替代方案：

利用容器流體並在外列中插入較小的網格列，每個網格列帶有它的背景顏色。

使用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>

概念類似 Bootstrap 5，但沒有「-xs-」中綴。

Bootstrap 4 範例：

<div class="container">

使用引導程式3:

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

第二個容器包裝在另一個容器一個包裝器DIV中：在 Bootstrap 3 中使用偽元素：

以上是如何使用 Bootstrap 創建具有不同背景顏色的全螢幕兩欄佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！