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.