使用 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中文網其他相關文章!