Bagaimana untuk Mencipta Tujuh Lajur Sama dalam Bootstrap?

Mencapai 7 Lajur Bootstrap Setara

Dalam Bootstrap, mencipta lajur adalah mudah, tetapi tidak selalunya cara untuk mencapai konfigurasi lajur yang kurang biasa, seperti tujuh lajur yang sama.

Mengatasi Lebar Lajur dengan Pertanyaan Media CSS

Untuk mencapai tujuh lajur yang sama, kita perlu mengatasi lebar lalai lajur Bootstrap menggunakan media CSS pertanyaan. Begini caranya:

1. Buat kelas tersuai, seperti "seven-cols," untuk bekas baris.
2. Gunakan pertanyaan media CSS untuk menetapkan lebar lajur individu dalam baris itu bekas.

Kod CSS:

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

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

Mengira Lebar Lajur:

Lebar dikira menggunakan formula:

width = 100% / 7 column-number

Dalam kes ini, dengan tujuh lajur:

width = 100% / 7 = 14.285714285714285714285714285714%

Ini bermakna setiap lajur hendaklah ditetapkan kepada 14.285714285714285714285714285714% daripada bekas baris induk.>

Penanda HTML:

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

Demo Kerja:

Lihat demo yang berfungsi pada jsbin untuk melihat tujuh lajur yang sama dalam tindakan :

https://jsbin.com/vuvut/3/edit?css,output

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