Bagaimana untuk Memanjangkan Warna Latar Belakang dalam Lajur Bootstrap Sambil Mengekalkan Lebar Berkotak?

Memperluas Warna Latar Belakang dengan Bootstrap

Mencipta tapak web dengan lajur yang mempunyai warna latar belakang yang berbeza boleh dicapai menggunakan Bootstrap. Walau bagaimanapun, apabila melaksanakan ciri ini, adalah penting untuk memastikan kandungan kekal dalam lebar kotak bootstrap yang ditetapkan, terutamanya pada skrin yang lebih besar.

Bootstrap 5:

Dalam Bootstrap 5, gunakan elemen pseudo yang diletakkan secara mutlak pada lajur dengan latar belakang yang dikehendaki warna:

<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:

Dalam Bootstrap 3, gunakan DIV pembalut tambahan di sekeliling bekas kedua:

<div class="container">

Contoh dengan Elemen Pseudo:

Untuk Bootstrap 3, anda juga boleh mencipta kesan yang diingini menggunakan elemen pseudo:

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

Atas ialah kandungan terperinci Bagaimana untuk Memanjangkan Warna Latar Belakang dalam Lajur Bootstrap Sambil Mengekalkan Lebar Berkotak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!