Bagaimana untuk Menggunakan Lebih Daripada 12 Lajur dalam Bootstrap 3 Baris?

Bootstrap 3 - Menggunakan Lebih daripada 12 Lajur Berturut-turut

Mengatasi Gelagat Terapung untuk Lajur Berlebihan

Dalam Bootstrap 3, div .row biasanya mengandungi 12 lajur, dan lajur tambahan tidak terapung secara lalai. Ini boleh menyebabkan lajur yang lebih luas bertindih dengan lajur yang lebih kecil.

Untuk menangani perkara ini, kelas tersuai boleh digunakan untuk mengatasi gelagat apungan lajur yang berlebihan:

<code class="css">/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
    float: left;    
}

/* col-sm float fix for large column groups */    
@media (min-width: 768px) {    
    .large-group .col-sm-12 {    
        float: left;    
    }    
}

/* col-md float fix for large column groups */    
@media (min-width: 992px) {    
    .large-group .col-md-12 {    
        float: left;    
    }    
}

/* col-lg float fix for large column groups */    
@media (min-width: 1200px) {
    .large-group .col-lg-12 {    
        float: left;    
    }    
}</code>

Mengapa Menggunakan Lebih daripada 12 Lajur ?

Pada mulanya, menggunakan lebih daripada 12 lajur berturut-turut mungkin kelihatan berlawanan dengan intuitif, tetapi ia sebenarnya mempunyai tujuan dalam mengekalkan responsif. Dokumentasi Bootstrap menyatakan:

"Jika lebih daripada 12 lajur diletakkan dalam satu baris, setiap kumpulan lajur tambahan akan, sebagai satu unit, membalut ke baris baharu."

Sebagai contoh , mempunyai 24 lajur dalam satu baris akan menghasilkan dua baris 12 lajur setiap satu apabila saiz skrin dikecilkan.

Contoh Penggunaan

Berikut ialah contoh yang menunjukkan cara menggunakan kelas tersuai:

<code class="html"><div class="container">
    <div class="row large-group" style="background-color:#ebebeb;">    
        <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>    
        <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>    
        <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>    
    </div>    
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Lebih Daripada 12 Lajur dalam Bootstrap 3 Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!