如何在保持盒裝寬度的同時擴展引導列中的背景顏色？

使用 Bootstrap 擴展背景顏色

可以使用 Bootstrap 來建立具有不同背景顏色的列的網站。但是，在實現此功能時，必須確保內容保持在定義的引導程式盒裝寬度內，尤其是在較大的螢幕上。

Bootstrap 5：

在Bootstrap 中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>

Bootstrap 3:

在Bootstrap 3 中，在第二個容器周圍使用額外的包裝DIV：

<div class="container">

偽範例元素：

對於Bootstrap 3，您也可以使用偽元素創造所需的效果：

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

以上是如何在保持盒裝寬度的同時擴展引導列中的背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！