如何调整Bootstrap的container-fluid使卡片垂直方向更紧凑？

我正在使用Bootstrap的container-fluid容器，容器内放置了多张卡片。当前卡片以网格布局排列，请问如何修改容器以让卡片在垂直方向上排列得更紧凑？

要让Bootstrap卡片在垂直方向排列更紧凑，可通过以下几种方式实现：

• 使用Bootstrap内置间距工具类
  Bootstrap的间距系统可以直接调整网格和卡片的垂直间距：

  1. 给包裹卡片的row容器添加g-0（Bootstrap 5+）或no-gutters（Bootstrap 4）类，移除网格列之间的默认垂直间距；
  2. 调整卡片的上下外边距：默认卡片带有my-3类，可替换为my-1/my-2来缩小间距，或用mb-0/mt-0直接取消单边间距。
     示例代码：

  <div class="container-fluid">
    <div class="row g-0">
      <div class="col-md-4">
        <div class="card my-1">
          <!-- 卡片内容 -->
        </div>
      </div>
      <!-- 更多卡片列 -->
    </div>
  </div>
  

• 自定义CSS精细调整
  如果内置类的粒度不够，可通过自定义CSS进一步压缩间距：

  /* 调整卡片底部外边距 */
  .card {
    margin-bottom: 0.5rem; /* 根据需求设置数值，默认约1rem */
  }
  /* Bootstrap 5中可直接修改网格行的垂直间距变量 */
  .row {
    --bs-gutter-y: 0.5rem;
  }
  

• 压缩卡片内部间距
  若卡片内部留白过多，可调整card-body的内边距：

  <div class="card-body p-2">
    <!-- 卡片内容，p-2为缩小后的内边距，默认是p-3 -->
  </div>
  

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