如何使用 Bootstrap 建立具有不同背景顏色的全寬列？

如何建立延伸到螢幕邊緣的不同背景顏色的列

要實現這種佈局，我們需要使用容器的組合具有不同的背景顏色和絕對定位。

Bootstrap 5

選項1：偽元素方法

• 使用容器流體建立一個包裝容器來填充一個包裝容器整個視口。
• 在具有絕對定位的列上使用偽元素來創建容器內的錯覺

選項2：嵌套網格方法

• 使用container-fluid作為主容器。
• 巢狀外列內較小的網格列，每個列都有自己的背景顏色。

Bootstrap 4 和 3

• 使用容器建立包裝器容器。
• 在包裝器內，建立另一個容器根據需要設定背景顏色。
• 調整邊距和填充以實現所需的佈局。

附加選項：偽元素技術

或者，您可以使用偽元素建立延伸到螢幕邊緣的彩色背景。例如：

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

此技術提供了一種更靈活的方法來創建延伸到螢幕邊緣的彩色區域，但需要仔細考慮定位以避免內容重疊。

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