Bagaimana untuk Mencipta Sistem Grid 7 Lajur dalam Bootstrap?

Mendapatkan 7 Lajur Sama dalam Bootstrap

Cabaran

Mencapai 7 lajur yang sama dalam Bootstrap boleh menjadi satu cabaran, memandangkan sistem lajur lalainya sebanyak 12 lajur. Coretan kod berikut menunjukkan percubaan untuk mencipta 5 lajur yang sama menggunakan kelas lajur terbina dalam Bootstrap:

<code class="html"><div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div></code>

Walau bagaimanapun, ini hanya menghasilkan 5 lajur dan bukannya 7 yang dikehendaki.

Menyesuaikan Lebar Lajur

Untuk mengatasi had ini, adalah perlu untuk mengatasi lebar lajur lalai menggunakan pertanyaan CSS3 @media. Menyesuaikan sifat lebar lajur berdasarkan bilangan lajur yang dikehendaki akan mencapai kesan yang diingini.

Pelaksanaan Kod

Kod berikut menunjukkan cara mencipta sistem grid 7 lajur dalam Bootstrap:

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div></code>

Kelas tujuh kol ditambah pada baris luar untuk membezakannya daripada standard Baris Bootstrap.

CSS tersuai kemudiannya digunakan untuk menentukan lebar setiap lajur:

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

@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%;
  }
}

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

Nilai lebar 14.285714285714285714285714285714% diperolehi dengan membahagikan nombor dengan 70% ) dan darab dengan nombor lajur (1 dalam kes ini). Pengiraan ini memastikan bahawa semua lajur mempunyai lebar yang sama.

Dengan menggabungkan CSS tersuai dan kelas tujuh kol, anda boleh mencipta sistem grid fleksibel dengan 7 lajur yang sama yang menyesuaikan diri dengan saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sistem Grid 7 Lajur dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!