Bagaimana untuk Mengatasi Gelagat Terapung Lajur Bootstrap untuk Lebih daripada 12 Lajur Berturut-turut?

Mengatasi Gelagat Terapung Lajur Bootstrap untuk Kiraan Lajur Tidak Terhad

Bootstrap 3 mengenakan kiraan lajur maksimum 12 berturut-turut, tetapi kadangkala anda mungkin perlu menggunakan lebih. Secara lalai, lajur dengan lebar 12 unit (col-xs-12, col-sm-12, dll.) tidak terapung, yang boleh mengganggu lajur terapung lain dalam baris yang sama.

Untuk menangani ini, kelas override boleh digunakan untuk membenarkan sebarang bilangan lajur terapung dengan betul.

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

Timpa ini memastikan semua lajur dalam baris dengan kelas "kumpulan besar" akan terapung, tanpa mengira lebarnya .

Contoh penggunaan:

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

Walaupun secara umumnya tidak disyorkan untuk memintas prinsip reka bentuk Bootstrap, penggantian ini membolehkan lebih fleksibiliti dalam mencipta reka letak yang kaya kandungan.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Gelagat Terapung Lajur Bootstrap untuk Lebih daripada 12 Lajur Berturut-turut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!