首頁 > web前端 > css教學 > 如何在保持盒裝寬度的同時擴展引導列中的背景顏色?

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

Patricia Arquette
發布: 2024-11-27 12:07:09
原創
962 人瀏覽過

How to Extend Background Colors in Bootstrap Columns While Maintaining Boxed Width?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板