如何消除堆叠引导行中的间隙？-css教程-PHP中文网

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

Susan Sarandon

发布： 2024-11-07 12:21:03

原创

1027 人浏览过

How to Eliminate Gaps in Stacked Bootstrap Rows?

堆叠 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中文网其他相关文章！