如何调整Bootstrap卡片间距？实现紧凑居中的卡片布局

核心修改点 #

• 让卡片行整体居中：给row添加justify-content-center类
• 缩小卡片间距：给row添加g-2（可调整数值，比如g-1更紧凑）类替代自定义column-gap
• 让列宽适配卡片：把每个col改为col-auto，避免列占用多余空间
• 替换过时的<center>标签：用Bootstrap的text-center类实现内容居中

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="row justify-content-center g-2">
  <div class="col-auto">
    <div class="card" style="width: 16.5rem">
      <img src="https://via.placeholder.com/300x100" class="card-img-top" alt="..." />
      <div class="card-body text-center">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-auto">
    <div class="card" style="width: 16.5rem">
      <div class="card-body text-center">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
  <div class="col-auto">
    <div class="card" style="width: 16.5rem">
      <div class="card-body text-center">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
  <div class="col-auto">
    <div class="card" style="width: 16.5rem">
      <div class="card-body text-center">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
</div>

说明 #

• justify-content-center：让flex容器（row）内的元素在水平方向居中
• g-2：控制列之间的间距，数值从0到5，数值越小间距越紧凑
• col-auto：列宽自动适配内部卡片的宽度，避免默认col分配多余空间导致的大间距
• text-center：替代<center>标签，符合Bootstrap的布局规范，实现卡片内容居中

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