如何使用 CSS 减少 bootstrap-5 中卡片之间的间距

Question

如何使用 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;
}

我尝试了太多但无法消除间距。 正如您在图像中看到的空间。卡之间的间距是固定的。我尝试了很多方法来修复它，但还是不行。

Answer 1

两个容易被忽视的问题导致了您的问题。首先，卡片具有默认边距和填充，必须手动将其设置为零。第二个位于指定列的单独 div 中。我像这样重组了你的代码：

    #services {
        padding: 80px 0;
    }

    .service-img {
        width: 100px;
        margin-top: 20px;
    }

    .services-head {
        color: #2596be;
        padding-top: 10px;
        font-family: "Exo", sans-serif;
    }

    .container {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .card {
        text-align: center;
        margin-top: 10px;
        border-color: #2596be;
        border-radius: 5px;
        width: 150px;
        height: 150px;
        margin: 0;
    }

    .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;
    }

<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 d-flex flex-row justify-content-center">
            <div class="card">
                <img src="images/network.png" class="service-list">
                <div class="card-body">
                    <h4 class="card-title">Blood</h4>
                </div>
            </div>
            <div class="card">
                <img src="images/network.png" class="service-list">
                <div class="card-body">
                    <h4 class="card-title">Donation</h4>
                </div>
            </div>
            <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 class="card">
                <img src="images/network.png" class="service-list">
                <div class="card-body">
                    <h4 class="card-title">Education</h4>
                </div>
            </div>
        </div>
    </div>
</section>