如何使用 Bootstrap 盒裝內容建立兩個全螢幕背景列？

獲得兩列具有不同背景顏色並延伸到屏幕邊緣的

理解問題

目標是創建具有兩步列的網頁佈局，兩列具有不同的背景顏色，延伸到螢幕邊緣，同時確保列中的內容保留在定義的引導程式盒內

Bootstrap 3 解決方案

Bootstrap 3 中建議的方法是在第二個容器周圍使用另一個包裝器 DIV。這允許第二個容器繼承最外層包裝器的寬度，而包裝器的背景顏色可以延伸到螢幕邊緣。

Bootstrap 4 和 5 解

在 Bootstrap 4 和 5中，首選方法是使用容器流體類別以及在外列中嵌套較小的網格列來實現

附加選項

實現類似效果的另一種方法是使用偽元素，例如.right:before 來創建彩色背景的外觀超出容器寬度。

此方法也可以應用於 Bootstrap 3以及更高版本。

以上是如何使用 Bootstrap 盒裝內容建立兩個全螢幕背景列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！