Bagaimana untuk Memanjangkan Baris Bootstrap Melangkaui Bekasnya?

Melanjutkan Baris Bootstrap Melampaui Bekas

Penerangan Masalah

Sistem grid Bootstrap menyediakan cara yang mudah untuk mencipta reka letak responsif. Walau bagaimanapun, dalam beberapa keadaan, anda mungkin menghadapi situasi di mana anda memerlukan elemen untuk melangkaui lebar bekas. Ini boleh memberikan cabaran dalam mencapai reka bentuk yang diingini.

Penyelesaian

Pilihan 1: Menggunakan Unsur Pseudo CSS

Buat pseudo ::sebelum elemen dengan offset kiri negatif melepasi lebar bekas. Elemen ini akan bertindak sebagai pengatur jarak yang menolak elemen sasaran melepasi bekas.

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

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

Pilihan 2: Menggunakan Bekas Kedudukan Mutlak

Gunakan cecair bekas dengan kedudukan mutlak yang memanjang ke tepi skrin di belakang bekas utama bertindak sebagai "hantu" bekas.

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

Sumber Tambahan

• [Demonstrasi Codeply (Pilihan 1)](http://codeply.com/go/C80RYwhWrc)
• [ Demonstrasi Codeply (Pilihan 2)](https://codeply.com/go/txUHH72f16)
• [Contoh Berkaitan: Dapatkan Dua Lajur dengan Warna Latar Belakang Berbeza yang Melanjutkan ke Tepi Skrin](https://stackoverflow.com/a/ 35627548)

Atas ialah kandungan terperinci Bagaimana untuk Memanjangkan Baris Bootstrap Melangkaui Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!