Bootstrap 4中移除卡片垂直间距并使卡片占满可用空间的实现方案

看起来你想要的是让高度不一的卡片填满垂直空间，消除默认网格布局产生的空隙对吧？Bootstrap 4的原生网格基于flexbox，每行高度由最高的元素决定，所以会留下空隙，我们可以用两种方法解决这个问题：

方法一：纯CSS列布局（无需插件） #

这种方法利用CSS多列布局特性，不需要额外JS，实现起来简单直接：

首先修改你的HTML结构，把原来的row和col-4换成自定义容器，同时移除卡片的mb-4类（避免默认底部外边距）：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card-grid">
  <div class="card">
    <div class="card-body">
      <h1>Lorem</h1>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h1>Lorem<br>ipsum</h1>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h1>Lorem<br>ipsum<br>dolor<br>sit<br>met<br>a</h1>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h1>hello</h1>
    </div>
  </div>
</div>

然后添加自定义CSS：

/* 定义3列布局，对应原来的col-4 */
.card-grid {
  column-count: 3;
  column-gap: 1.5rem; /* 和Bootstrap默认的gutter间距保持一致 */
}

/* 防止卡片被列拆分到两行 */
.card {
  break-inside: avoid;
  margin-bottom: 1.5rem; /* 卡片之间的垂直间距，可按需调整 */
}

/* 响应式适配：不同屏幕尺寸调整列数 */
@media (max-width: 991px) {
  .card-grid {
    column-count: 2;
  }
}

@media (max-width: 575px) {
  .card-grid {
    column-count: 1;
  }
}

优点： #

• 纯CSS实现，无外部依赖
• 响应式友好，适配不同屏幕尺寸
• 代码简洁易维护

注意： #

这种布局是按列从上到下排列，不是传统的从左到右逐行排列，如果需要后者，看下面的方法。

方法二：使用Masonry插件（灵活的瀑布流） #

如果你需要卡片从左到右逐行填充空隙，Masonry是最常用的瀑布流插件，适配Bootstrap非常方便：

首先引入必要的JS文件（jQuery和Masonry），保留你原来的网格结构，给row加一个自定义类：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

<div class="row masonry-grid">
  <div class="col-4 mb-3"> <!-- 用mb-3替代mb-4，调整间距到合适大小 -->
    <div class="card">
      <div class="card-body">
        <h1>Lorem</h1>
      </div>
    </div>
  </div>
  <div class="col-4 mb-3">
    <div class="card">
      <div class="card-body">
        <h1>Lorem<br>ipsum</h1>
      </div>
    </div>
  </div>
  <div class="col-4 mb-3">
    <div class="card">
      <div class="card-body">
        <h1>Lorem<br>ipsum<br>dolor<br>sit<br>met<br>a</h1>
      </div>
    </div>
  </div>
  <div class="col-4 mb-3">
    <div class="card">
      <div class="card-body">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</div>

然后初始化Masonry：

$(document).ready(function() {
  $('.masonry-grid').masonry({
    itemSelector: '.col-4', // 指定网格项选择器
    columnWidth: '.col-4', // 列宽参考元素
    gutter: 30 // 和Bootstrap默认的gutter间距匹配
  });
});

优点： #

• 卡片按从左到右逐行排列，自动填充所有垂直空隙
• 支持动态添加卡片（需要调用masonry('layout')更新布局）
• 布局更灵活，适合复杂场景

注意： #

需要引入jQuery和Masonry，不过都是常用的CDN资源，加载速度有保障。

额外提示 #

如果你只是想简单移除卡片之间的底部外边距，直接删掉卡片的mb-4类就行，但这只能解决间距问题，不能消除高度不一致导致的网格空隙——所以还是需要上面的瀑布流方案才能真正让卡片填满所有空间。

内容的提问来源于stack exchange，提问作者gambit11550