Bagaimana untuk Membuat Elemen Bootstrap Melangkaui Sempadan Bekas?

Pelanjutan Elemen Melepasi Sempadan Bekas dalam Bootstrap

Dalam Bootstrap, kelas kontena menentukan lebar kawasan kandungan. Walau bagaimanapun, reka bentuk tertentu mungkin memerlukan elemen yang melampaui bekas ini. Begini cara untuk mencapainya:

Menggunakan Elemen Pseudo CSS

Buat pseudo CSS ::before elemen dalam elemen limpahan. Ia akan mengubah saiz ketinggian bersama-sama dengan div yang melimpah.

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

Contoh:

<div class="container">
    <div class="row">
        <div class="col-lg-6 left">
            ...
        </div>
    </div>
</div>

Menggunakan Bekas Kedudukan Mutlak

Letakkan a . bekas-cecair (lebar penuh) di belakang bekas kandungan. Ia akan bertindak sebagai "hantu" yang melangkaui sempadan.

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

Contoh:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="image.jpg">
        </div>
    </div>
</div>

Pertanyaan Serupa:

• Dapatkan Dua Lajur dengan warna latar belakang berbeza yang memanjang ke skrin tepi
• Contoh dengan imej kanan
• Contoh dengan imej kiri
• Lanjutkan elemen melepasi bekas bootstrap

Atas ialah kandungan terperinci Bagaimana untuk Membuat Elemen Bootstrap Melangkaui Sempadan Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!