Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menghapuskan Ruang Menegak Antara Lajur dalam Bootstrap 4?

Bagaimana untuk Menghapuskan Ruang Menegak Antara Lajur dalam Bootstrap 4?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-10 18:17:02320semak imbas

How to Eliminate Vertical Space Between Columns in 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!

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