Bootstrap卡片如何实现宽度均匀分布且首尾无多余外边距

• 全局给.card-annuaire设置margin-right: 1rem后，每行最后一张卡片的右外边距没有被抵消，会在容器右侧挤出1rem宽度的空隙，直接露出父元素.azer的红色背景
• 代码中给卡片行设置了g-0清除了Bootstrap原生列间距，没有利用框架自带的gutter规则实现无外溢的均匀排布，手动加边距很容易出现首尾漏空的问题

优先使用Bootstrap原生的间距规则实现，维护成本更低，适配响应式场景。

方案一：使用Bootstrap原生Gutter（推荐） #

1. 移除.card-annuaire样式中多余的margin-right: 1rem，新增width:100%让卡片撑满所在列的宽度
2. 将卡片外层行的g-0替换为对应水平、垂直间距的gutter类，Bootstrap会自动通过行的负margin抵消首尾列的内边距，不会出现侧边漏背景的问题

修改后的CSS代码：

.azer {
  background: red;
}

.card-annuaire {
  background: green;
  border: 0;
  border-radius: 0;
  width: 100%;
}

.card-annuaire .card-body {
  text-align: center;
}

HTML部分仅需修改行元素的class：

<!-- 原代码为<div class="row g-0">，gx-4对应1rem水平间距，gy-4对应垂直间距 -->
<div class="row gx-4 gy-4">

如果需要调整卡片间距，直接替换gx-*、gy-*的数字后缀即可，数值越大间距越大。

方案二：手动清除最后一个卡片的右外边距 #

如果需要保留手动设置margin的写法，可以通过CSS伪类选择器选中每行最后一列的卡片，清除它的右外边距：

.azer {
  background: red;
}

.card-annuaire {
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}

/* 匹配每行第4个列（桌面端一行4张卡片），清除内部卡片的右外边距 */
.grid-item-annuaire:nth-child(4n) .card-annuaire {
  margin-right: 0;
}

注意：该方案需要针对不同响应式断点单独写nth-child规则，比如平板端一行2张卡片时需要额外写对应规则，维护成本更高，不推荐使用。

• 卡片等宽沿容器均匀排布
• 首张卡片左侧、末张卡片右侧无多余外边距，不会露出父元素背景
• 卡片水平、垂直间距统一

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