Bagaimana untuk Mencapai 7 Lajur Bootstrap Sama?

Mencapai 7 Lajur Bootstrap Setara

Dalam Bootstrap, mencipta reka letak grid dengan lajur yang sama adalah mudah menggunakan kelas yang telah ditetapkan. Walau bagaimanapun, apabila cuba mencipta tujuh lajur sedemikian, kelas lalai mungkin tidak mencukupi.

Untuk mencapai ini, anda perlu menggunakan beberapa pertanyaan @media CSS3 untuk mengatasi lebar lajur lalai. Berikut ialah pecahan terperinci:

• Ubah Suai Lebar Lajur:

  Buat kelas khusus (tujuh kol) untuk bekas baris dan .col bersarang -md-1 kelas untuk setiap lajur. Menggunakan pendekatan ini, anda boleh mengatasi lebar lajur lalai dan menyesuaikannya untuk senario khusus ini.

• Pertanyaan Media:

  Laksanakan pertanyaan @media untuk melaraskan lebar lajur untuk saiz skrin yang berbeza. Untuk skrin 768px dan ke atas, tetapkan lebar lajur kepada 100%. Untuk skrin 992px dan ke atas, kirakan lebar sebagai (100% / 7) = 14.285714285714285714285714285714%. Formula ini memastikan bahawa kesemua tujuh lajur mempunyai lebar yang sama.

• Tunjuk Cara Kerja:

  Demonstrasi kod langsung disediakan melalui jsbin. Klik "Halaman penuh" untuk melihat reka letak.

Dengan mengikut langkah ini, anda boleh membuat reka letak grid 7 lajur tersuai dalam bekas Bootstrap yang lebih luas. Ingat untuk melaraskan nilai CSS jika perlu berdasarkan keperluan reka bentuk khusus anda.

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