Bagaimana untuk Menjajarkan Div Ketinggian Tidak Sekata Secara Menegak dalam Baris Bootstrap Menggunakan CSS Clearfixes?

Penjajaran Menegak Div ​​Ketinggian Tidak Sekata dalam Bootstrap Menggunakan CSS Clearfixes

Matlamatnya adalah untuk menjajarkan secara menegak div dengan ketinggian yang berbeza-beza dalam baris Bootstrap tanpa menggunakan pemalam luaran seperti Masonry. Berikut ialah penyelesaian CSS:

Dalam struktur HTML yang disediakan, setiap kategori diwakili oleh div dengan kelas "kategori-menu". Div ini mempunyai ketinggian yang berbeza kerana item yang berbeza dalam setiap kategori. Untuk mencapai tindanan yang diingini, kami boleh menggunakan kelas keterlihatan Bootstrap.

Secara khusus, kami boleh menambah kelas "clearfix" dengan pengubah keterlihatan untuk mengosongkan terapung secara terpilih dalam reka letak div. Sebagai contoh, jika anda ingin mengosongkan terapung hanya dalam saiz skrin sederhana dan besar, anda boleh menggunakan kod berikut:

<div class="clearfix visible-md visible-lg"></div>

Begitu juga, untuk mengosongkan terapung hanya dalam saiz skrin kecil, gunakan:

<div class="clearfix visible-sm"></div>

Dengan menambahkan div pembersihan ini ke tempat yang sesuai dalam struktur HTML, anda boleh menghalang div terapung daripada membalut ke baris seterusnya, memaksanya untuk disusun secara menegak.

Contoh:

  

    ...
  
  

    ...
    <div class="clearfix visible-sm"></div>
  
  

    ...
  
  

    ...
    <div class="clearfix visible-md visible-lg"></div>
  
  

    ...
  

Dengan pendekatan ini, ketinggian div akan melaraskan secara dinamik berdasarkan kandungan, memastikan ia disusun dengan kemas dalam bekas baris.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Div Ketinggian Tidak Sekata Secara Menegak dalam Baris Bootstrap Menggunakan CSS Clearfixes?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!