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

Berurusan dengan Ruang Menegak Kosong Antara Lajur dalam Bootstrap 4

Satu isu biasa apabila bekerja dengan lajur dalam Bootstrap 4 ialah kehadiran ruang menegak kosong di antara mereka, terutamanya dalam viewport yang lebih besar. Ini boleh berlaku kerana Bootstrap 4 melaksanakan reka letak kotak flex, yang menjajarkan ketinggian lajur.

Memahami Gelagat

Dalam susun atur kotak flex, semua lajur dalam satu baris menjadi ketinggian yang sama dengan yang tertinggi lajur. Sebagai contoh, jika anda mempunyai tiga lajur dengan ketinggian yang berbeza, dua lajur yang lebih pendek akan memanjang secara menegak untuk memadankan ketinggian lajur yang paling tinggi. Akibatnya, ruang kosong muncul.

Resolusi: Menggunakan Terapung

Memandangkan lajur bersarang boleh mengganggu susunan lajur yang diingini, penyelesaian dalam Bootstrap 4 ialah menggunakan terapung. Ini meniru gelagat Bootstrap 3, di mana lajur akan terapung di sebelah satu sama lain.

Untuk mengalih keluar ruang menegak kosong, anda boleh menggunakan CSS berikut:

.container {
  .row {
    display: block !important;
    .col {
      float: left;
    }
  }
}

Kod ini mengatasi susun atur flexbox lalai dan menetapkan sifat paparan baris untuk disekat. Selain itu, ia menetapkan sifat apungan lajur ke kiri, membenarkan ia terapung bersebelahan antara satu sama lain.

Contoh Pelaksanaan

Berikut ialah contoh struktur HTML yang menggunakan apungan untuk menghapuskan ruang menegak kosong :

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

Dengan menggunakan terapung, anda boleh menghalang ruang menegak kosong daripada muncul dan mengekalkan susunan lajur yang dikehendaki walaupun dalam lebih besar tempat pandang.

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