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