Bolehkah Anda Membuat Susun Atur 7 Lajur dengan Bootstrap?

Adakah Mungkin untuk Mencipta 7 Lajur Sama Menggunakan Bootstrap?

Apabila bekerja dengan Bootstrap, adalah perkara biasa untuk mencipta lajur bernombor genap untuk reka letak yang seimbang. Walau bagaimanapun, anda mungkin menghadapi situasi di mana anda memerlukan bilangan lajur yang ganjil, seperti 7.

Mengatasi Lebar Lajur dengan CSS

Walaupun Bootstrap tidak menyediakan sistem 7 lajur secara asli, ia adalah mungkin untuk mencapai ini dengan mengatasi lebar lajur menggunakan CSS.

<code class="css">@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}</code>

Pertanyaan media ini menetapkan lebar semua lajur dengan kelas col-md-1 (serta col-sm-1 dan col-lg-1;) kepada 14.285714285714285714285714285714% untuk skrin bersaiz sederhana atau lebih besar. Ini memastikan pengagihan lajur yang sama.

Menggunakan Kelas Induk

Untuk mengandungi 7 lajur, anda memerlukan elemen induk dengan tujuh kol kelas untuk menggunakan penggantian.

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
  </div>
</div></code>

Kesimpulan

Dengan mengatasi lebar lajur menggunakan CSS dan menggunakan elemen induk, anda boleh mencipta reka letak 7 lajur menggunakan Bootstrap. Ingat bahawa pendekatan ini memerlukan CSS tambahan dan sentiasa lebih baik untuk mematuhi sistem grid Bootstrap asli apabila boleh.

Atas ialah kandungan terperinci Bolehkah Anda Membuat Susun Atur 7 Lajur dengan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!