Bagaimana untuk Menyusun Div Pelbagai Ketinggian dalam Bootstrap Menggunakan CSS?

Menyusun Div Pelbagai Ketinggian dalam Bootstrap Menggunakan CSS

Dalam senario ini, sistem baris Bootstrap menimbulkan cabaran dalam memaparkan kategori secara optimum ketinggian yang berbeza-beza. Untuk menangani isu ini tanpa menggunakan pemalam batu, pertimbangkan penyelesaian CSS berikut:

1. Gunakan kelas yang boleh dilihat untuk tindanan responsif:
   Gunakan .visible-sm kelas , .visible-md dan .visible-lg bersama-sama dengan clearfix. Ini memastikan terapungan dikosongkan dengan sewajarnya berdasarkan saiz skrin.

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

2. Contoh pelaksanaan:
   Di bawah ialah demonstrasi ringkas untuk dua kategori dengan berbeza ketinggian:

   <div class="row">
       <div class="col-md-6">
           <div class="category-div">

3. Nota tambahan:

   • .visible-sm mengosongkan terapung untuk skrin kecil (<=768px)
   • .visible-md membersihkan terapung untuk skrin sederhana (>768px)
   • .visible-lg mengosongkan terapung untuk skrin besar (>1200px)
   • Laraskan style="height: ...;" atribut yang sesuai dengan ketinggian div kategori khusus anda
   • Pastikan kelas clearfix digunakan di luar lajur untuk mengosongkan terapung dengan berkesan

Dengan melaksanakan teknik ini, anda boleh mencapai susunan elemen div yang responsif dengan ketinggian yang berbeza-beza dalam sistem grid Bootstrap. Pendekatan ini menyediakan penyelesaian CSS tulen yang serasi dengan Bootstrap, menangani keperluan untuk visualisasi reka letak yang optimum.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Div Pelbagai Ketinggian dalam Bootstrap Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!