Bagaimana untuk Menghapuskan Ruang Menegak Antara Lajur dalam Bootstrap 4?

Menghapuskan Ruang Menegak Antara Lajur dalam Bootstrap 4

Pernyataan Masalah:

Dalam Bootstrap 4 , apabila menggunakan reka letak dua lajur, ruang menegak kosong muncul di antara lajur apabila viewport tidak berada dalam "mod mudah alih".

Punca:

Bootstrap 4 menggunakan flexbox, yang menjajarkan ketinggian semua lajur agar sepadan dengan yang tertinggi.

Cadangan Penyelesaian: Menggunakan Terapung

Untuk mengelakkan ruang kosong, pertimbangkan untuk menggunakan apungan:

<div class="container">
  <div class="row d-lg-block">
    <div class="col-lg-9 float-left description">Desc</div>
    <div class="col-lg-3 float-right sidebar">Sidebar</div>
    <div class="col-lg-9 float-left comments">Comments</div>
  </div>
</div>

Penjelasan:

• Kelas d-lg-block menetapkan sifat paparan baris kepada sekat pada port pandangan yang besar, membenarkan lajur terapung.

Tambahan Nota:

• Lajur bersarang (
  ) tidak akan mencapai susunan lajur yang diingini dalam kes ini.
• Untuk rujukan, topik berkaitan "Bootstrap dengan susunan berbeza pada versi mudah alih" membincangkan isu yang serupa.

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