Bolehkah Sistem Grid Bootstrap Mencipta 7 Lajur Sama?

Sistem Grid Bootstrap dengan 7 Lajur Sama

Apabila bekerja dengan Bootstrap, mungkin sukar untuk membuat reka letak dengan bilangan lajur yang tidak sekata. Sistem grid Bootstrap lazimnya mematuhi nombor genap, menyebabkan ramai tertanya-tanya sama ada ia boleh dilaksanakan untuk mempunyai 7 lajur yang sama.

Jawapannya terletak pada mengatasi lebar lajur menggunakan pertanyaan CSS3 @media. Begini cara anda boleh mencapainya:

1. Isytiharkan Kelas Bekas: Mulakan dengan mencipta kelas kontena di mana 7 lajur akan berada. Contohnya:

   <code class="html"><div class="container">
    ...
   </div></code>

2. Tentukan Struktur Baris dan Lajur: Dalam bekas, tentukan baris dan 7 lajur dengan kelas yang dikehendaki:

   <code class="html"><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></code>

3. Kira Lebar Lajur: Tentukan lebar lajur yang sesuai berdasarkan bilangan lajur (dalam kes ini, 7). Formula untuk lebar ialah:

   Width = 100% / Number of Columns

   Jadi, untuk 7 lajur, lebarnya ialah 100% / 7 ≈ 14.2857%.

4. Timpa Lebar Lajur Menggunakan Pertanyaan Media: Untuk mengatasi lebar lajur lalai, gunakan pertanyaan media CSS untuk menyasarkan titik putus tertentu. Contohnya:

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

Dengan memasukkan pertanyaan media ini, anda boleh memastikan lebar lajur diselaraskan berdasarkan saiz skrin.

Demo Kerja:

Lawati demo dalam talian ini untuk melihat 7 lajur yang sama dalam tindakan:
[Pautan ke Demo]

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