如何使用CSS减小Bootstrap 5中卡片之间的间距？

我需要使用CSS减小Bootstrap 5中卡片之间的间距，尝试了多种方法但始终无法消除固定间距，以下是我的代码：

HTML代码 #

<section id="services">
  <div class="container">
    <div class="row text-center">
    <div class="col-md-12">
    <img src="images/network.png" class="service-img">
    <h4 class="services-head mb-2">Search Facilities</h4>
    </div>
    </div>
    <div class="row row-cols-1 row-cols-md-2 g-0">
      <div class="col-md-3">
        <div class="card">
          <img src="images/network.png" class="service-list">
          <div class="card-body">
            <h4 class="card-title">Blood</h4>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <img src="images/network.png" class="service-list">
          <div class="card-body">
            <h4 class="card-title">Donation</h4>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <img src="images/network.png" class="service-list">
          <div class="card-body">
            <h4 class="card-title">People Needs</h4>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <img src="images/network.png" class="service-list">
          <div class="card-body">
            <h4 class="card-title">Education</h4>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</section>

自定义CSS代码 #

#services{
    padding: 80px 0;

}
.service-img{
    width: 100px;
    margin: top 20px;
}
.services-head{
    color: #2596be;
    padding-top: 10px;
    font-family: "Exo", sans-serif;
}
.card{
    text-align: center;
    margin-top: 10px;
    border-color: #2596be;
    border-radius: 5px;
    padding: 30px 0;
    width: 150px;
    height: 150px;
}
.card .card-title{
    color: #2596be;
    font-family: "Exo", sans-serif;
    font-size: medium;
}
.service-list{
    width: 70px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

问题分析与解决方法 #

你的卡片间距问题主要来自两个核心原因：

1. Bootstrap的col-*类默认带有左右内边距（padding-left/padding-right），这是卡片间横向间距的主要来源
2. 包含卡片的row同时使用了row-cols-md-2和col-md-3，两者布局逻辑冲突（row-cols-md-2指定每行2列，col-md-3对应每行4列），导致额外的布局间距

步骤1：修正布局结构 #

删除row标签中的row-cols-md-2类，避免布局逻辑冲突：

<div class="row g-0">
  <!-- 卡片对应的col-md-3代码保持不变 -->
</div>

步骤2：消除列的默认内边距 #

通过自定义CSS覆盖Bootstrap列的默认内边距，同时按需调整卡片的外边距：

/* 清除列的默认左右内边距 */
#services .row .col-md-3 {
  padding-left: 0;
  padding-right: 0;
  /* 可选：如果需要保留极小间距，可设置margin，比如：
  margin: 0 3px;
  */
}

/* 调整卡片的上下外边距，避免间距过大 */
.card {
  text-align: center;
  /* 把原有的margin-top改为更小的值或按需设置上下左右margin */
  margin: 5px auto;
  border-color: #2596be;
  border-radius: 5px;
  padding: 30px 0;
  width: 150px;
  height: 150px;
}

额外优化：用Bootstrap原生类控制间距 #

如果你不想写自定义CSS，也可以通过调整row的g-*类来控制整体间距，比如用g-1替代g-0，实现更精准的间距控制，Bootstrap的g-*类会统一管理列之间的gutter（间距）。

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