Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah Sistem Grid Bootstrap Mencipta 7 Lajur Sama?

Bolehkah Sistem Grid Bootstrap Mencipta 7 Lajur Sama?

Barbara Streisand
Barbara Streisandasal
2024-10-30 13:41:26733semak imbas

Can Bootstrap Grid System Create 7 Equal Columns?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn