首页  >  文章  >  web前端  >  如何消除堆叠引导行中的间隙?

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

Susan Sarandon
Susan Sarandon原创
2024-11-07 12:21:031001浏览

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn