堆疊Bootstrap 行中的間隙：解決方案

在基於Bootstrap 的網格中，當不同高度的圖塊堆疊時，通常會遇到間隙問題。要解決此問題，請考慮以下方法：

1。設定元素高度：

為作品集中的所有元素分配固定高度，以確保對齊一致。

2. Masonry佈局：

使用Masonry等工具自動調整元素高度並使其適合可用空間。

3.響應式列重置：

Bootstrap 提供「響應式列重置」。透過將這些類別套用到網格中，您可以動態設定列高並避免間隙。

4. Clearfix 與媒體查詢：

在每個元素之後，添加一個帶有迷你clearfix 的div。這可以使用媒體查詢隱藏，有效解決間隙問題。

程式碼範例：

  

    

      ... (Element content)
    
  
  
  
  ... (Additional elements)

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

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
  });
});