Bagaimana untuk Menghapuskan Jurang dalam Baris Bootstrap Bertindan?

Jurang dalam Baris Bootstrap Bertindan: Penyelesaian

Dalam grid berasaskan Bootstrap, adalah perkara biasa untuk menghadapi masalah dengan jurang apabila jubin dengan ketinggian yang berbeza-beza bertindan . Untuk menangani perkara ini, pertimbangkan pendekatan berikut:

1. Tetapkan Ketinggian Elemen:

Tetapkan ketinggian tetap kepada semua elemen dalam portfolio untuk memastikan penjajaran yang konsisten.

2. Reka Letak Masonry:

Gunakan alat seperti Masonry untuk melaraskan ketinggian elemen secara automatik dan muatkannya dalam ruang yang tersedia.

3. Tetapan Semula Lajur Responsif:

Bootstrap menyediakan "penetapan semula lajur responsif." Dengan menggunakan kelas ini pada grid anda, anda boleh menetapkan ketinggian lajur secara dinamik dan mengelakkan jurang.

4. Clearfix dengan Media Queries:

Selepas setiap elemen, tambahkan div dengan clearfix mini. Ini boleh disembunyikan menggunakan pertanyaan media, dengan berkesan menangani isu jurang.

Contoh Kod:

<div class="row portfolio">
  <div class="col-lg-2 col-sm-3 col-xs-4">
    <div class="panel panel-default">
      ... (Element content)
    </div>
  </div>
  <div class="clear"></div>  <!-- Added after each element -->
  ... (Additional elements)
</div>

@media (max-width: 767px) {
  .portfolio > .clear:nth-child(6n)::before {
    /* Clearfix for mobile devices */
  }
}

Pendekatan jQuery:

var row=$('.portfolio');
$.each(row, function() {
  var maxh = 0;
  $.each($(this).find('div[class^="col-"]'), function() {
    if($(this).height() > maxh)
      maxh = $(this).height();
  });
  $.each($(this).find('div[class^="col-"]'), function() {
    $(this).height(maxh); // Set element heights uniformly
  });
});

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Jurang dalam Baris Bootstrap Bertindan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!