Bagaimana untuk Mencipta Reka Letak Dua Lajur Skrin Penuh dengan Warna Latar Belakang Berbeza Menggunakan Bootstrap?

Cara Membuat Dua Lajur dengan Warna Latar Belakang Berbeza yang Menjangkau Tepi Skrin

Masalah:

Anda ingin membuat dua lajur pada halaman web, setiap satu dengan warna latar belakang yang berbeza, memanjang ke skrin tepi. Walau bagaimanapun, kandungan lajur harus kekal dalam lebar tetap sistem grid Bootstrap.

Penyelesaian:

Menggunakan Bootstrap 5 Beta:

Konsepnya kekal serupa dalam Bootstrap 5:

• Gunakan unsur pseudo dengan kedudukan mutlak pada lajur untuk mencipta ilusi bekas dalam cecair bekas.

Contoh untuk Bootstrap 5 Beta:

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

Sebagai alternatif untuk Bootstrap 5:

• Gunakan cecair bekas dan masukkan lajur grid yang lebih kecil dalam lajur luar, setiap satu dengan warna latar belakangnya.

Menggunakan Bootstrap 4:

Konsep ini serupa dengan Bootstrap 5, tetapi tanpa "-xs-" infix.

Contoh untuk Bootstrap 4:

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

Menggunakan Bootstrap 3:

Balut bekas kedua dalam pembungkus lain DIV:

<div class="container">

Menggunakan Elemen Pseudo dalam Bootstrap 3:

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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Reka Letak Dua Lajur Skrin Penuh dengan Warna Latar Belakang Berbeza Menggunakan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!