Bagaimana untuk Memanjangkan Bootstrap 3 Baris Melangkaui Had 12 Lajur?

Menyesuaikan Bootstrap 3 untuk Memecah Had 12 Lajur dalam Baris

Masalah

Secara lalai, Bootstrap 3 memaksa lajur lebih daripada 12 unit untuk disusun secara menegak disebabkan oleh tingkah laku "float: none" mereka. Had ini boleh menghalang reka letak dinamik di mana berbilang blok kandungan boleh ditambah pada satu baris.

Penyelesaian

Untuk memecahkan sekatan ini, anda boleh menggunakan penggantian CSS tersuai untuk mengatasi gelagat Bootstrap dan membenarkan baris untuk menampung lebih daripada 12 lajur. Begini caranya:

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

Contoh Pelaksanaan

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

Rasionalisasi

Walaupun tingkah laku lalai Bootstrap memastikan baris kekal konsisten secara visual, ia mungkin tidak selalu sesuai untuk dinamik atau susun atur yang terhad ruang. Penyesuaian ini membolehkan lebih fleksibiliti dan responsif dalam situasi sedemikian.

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