Bagaimana untuk Mencipta Lajur Lebar Penuh dengan Warna Latar Belakang Berbeza Menggunakan Bootstrap?

Cara Membuat Lajur dengan Warna Latar Belakang Berbeza yang Melanjutkan Ke Tepi Skrin

Untuk mencapai susun atur ini, kita perlu menggunakan gabungan bekas dengan warna latar belakang yang berbeza dan kedudukan mutlak.

Bootstrap 5

Pilihan 1: Pendekatan Elemen Pseudo

• Buat bekas pembalut dengan cecair bekas untuk mengisi keseluruhan port pandangan.
• Gunakan elemen pseudo pada lajur dengan kedudukan mutlak untuk mencipta ilusi bekas dalam cecair bekas.

Pilihan 2: Pendekatan Grid Bersarang

• Gunakan cecair bekas sebagai bekas utama.
• Sarang lajur grid yang lebih kecil di dalam lajur luar, setiap satu dengan latar belakangnya sendiri warna.

Bootstrap 4 dan 3

• Buat bekas pembalut dengan bekas.
• Di dalam pembungkus, buat bekas lain dengan set warna latar belakang seperti yang dikehendaki.
• Laraskan jidar dan padding untuk mencapai yang diingini reka letak.

Pilihan Tambahan: Teknik Elemen Pseudo

Sebagai alternatif, anda boleh menggunakan elemen pseudo untuk mencipta latar belakang berwarna yang memanjang ke tepi skrin. Contohnya:

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

Teknik ini menyediakan pendekatan yang lebih fleksibel untuk mencipta kawasan berwarna yang memanjang ke tepi skrin, tetapi ia memerlukan pertimbangan yang teliti terhadap kedudukan untuk mengelakkan kandungan bertindih.

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