如何消除堆叠引导行中的间隙？

堆叠 Bootstrap 行中的间隙：解决方案

在基于 Bootstrap 的网格中，当不同高度的图块堆叠时，通常会遇到间隙问题。要解决此问题，请考虑以下方法：

1.设置元素高度：

为组合中的所有元素分配固定高度，以确保一致对齐。

2. Masonry 布局：

使用 Masonry 等工具自动调整元素高度并使其适合可用空间。

3.响应式列重置：

Bootstrap 提供“响应式列重置”。通过将这些类应用到网格中，您可以动态设置列高并避免间隙。

4. Clearfix 与媒体查询：

在每个元素之后，添加一个带有迷你clearfix 的div。这可以使用媒体查询隐藏，有效解决间隙问题。

代码示例：

<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 */
  }
}

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

以上是如何消除堆叠引导行中的间隙？的详细内容。更多信息请关注PHP中文网其他相关文章！