Bagaimana untuk Mengelakkan Ruang Menegak Kosong Antara Lajur dalam Bootstrap 4?

Ruang Menegak Kosong Antara Lajur dalam Bootstrap 4

Bootstrap 4 memperkenalkan flexbox, menghasilkan lajur berkongsi ketinggian yang sama dengan lajur tertinggi. Ini mewujudkan ruang kosong yang tidak diingini antara lajur dalam senario tertentu.

Penjajaran Flexbox dan Ruang Kosong

Pertimbangkan ini:

• Lajur A: Penerangan (Tinggi)
• Lajur B: Bar Sisi (Pendek)
• Lajur C: Ulasan (Tinggi)

Flexbox menjajarkan lajur secara menegak, menghasilkan:

------------------  ---------
|                  ||         |
|                  ||         |
------------------ |         |
------------------ |         |
|                  ||         |
------------------  ---------

Tetapi kami inginkan:

------------------  ---------
|                  |
 ------------------  
|                  |
 ------------------ |         |
|                  ||         |
 -------------------  ---------

Terapung sebagai Penyelesaian

Bootstrap 3 terapung terpakai, yang membenarkan lajur terapung dan mengambil hanya ruang yang mereka perlukan. Untuk mencapai ini dalam Bootstrap 4:

<div>

Kelas d-lg-block memaksa paparan:block pada baris, membenarkan lajur terapung pada skrin besar.

Bersarang dan Pemeliharaan Pesanan

Lajur bersarang seperti berikut mungkin kelihatan seperti penyelesaian:

<div>

Walau bagaimanapun, ini menjejaskan susunan lajur. Dalam contoh di atas, bar sisi akan dipaparkan terakhir pada skrin kecil disebabkan oleh susun atur automatik baris bersarang.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Ruang Menegak Kosong Antara Lajur dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!