Bagaimana untuk Mengatasi Had 12 Lajur Bootstrap 3 berturut-turut?

Bootstrap 3: Menangani Had Lajur dalam Baris

Gelagat lalai Bootstrap 3 mengehadkan bilangan lajur dalam satu baris kepada 12, menyebabkan isu apabila cuba melepasi had ini. Ini boleh berlaku apabila menambah berbilang blok kandungan secara dinamik, membawa kepada pertindihan yang tidak diingini.

Mengatasi Gelagat Bootstrap

Untuk menangani kekangan ini, kelas tersuai boleh dibuat untuk mengatasi Tingkah laku lalai Bootstrap dan membenarkan lebih daripada 12 lajur berturut-turut. Kelas ini boleh digunakan pada bekas .row.

Pertimbangan Responsif

Walaupun lebih daripada 12 lajur dibenarkan dalam satu baris, adalah penting untuk mempertimbangkan responsif. Bootstrap menggunakan pembalut lajur untuk memastikan lajur kekal sejajar merentas saiz skrin yang berbeza.

Kod Contoh

Kod berikut menunjukkan pelaksanaan kelas tersuai, memastikan lajur terapung dengan betul walaupun apabila melebihi 12 unit berturut-turut:

<code class="css">.large-group .col-xs-12 {
  float: left;
}

@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

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

Contoh Penanda

Penanda berikut menunjukkan penggunaan 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>

Faedah

Menggunakan pendekatan ini menyediakan:

• Fleksibiliti untuk menampung reka letak kandungan yang berbeza-beza.
• Responsif dipertingkat yang melaraskan secara dinamik kepada saiz skrin yang berbeza .

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Had 12 Lajur Bootstrap 3 berturut-turut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!