如何减小Bootstrap 4中Card组件的间距

问题原因 #

你的布局出现异常间距是两个规则叠加导致的：

• Bootstrap 4 的col-md-4栅格列本身自带默认左右内边距（gutter），用来控制同行列之间的水平间距
• 你自定义的.card样式额外加了width:55%和margin:2%，卡片没有撑满父列宽度，额外的margin和栅格默认间距叠加，就出现了多余的留白

解决方案（优先使用Bootstrap原生规范，兼容性更好） #

1. 首先调整自定义CSS，删除.card的错误宽距属性，补全min-height的单位：

.card {
  min-height: 100px; /* 原写法缺少px单位，补全后生效 */
}
.card-img-top {
  height: 150px;
  object-fit: cover;
}
.card-body{
  box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}

2. 添加自定义CSS控制栅格间距，以此调整卡片间距：

/* 自定义卡片布局的栅格间距 */
.row.card-wrap .col-md-4 {
  padding-left: 6px; /* 水平左间距，数值越小间距越窄，可按需调整 */
  padding-right: 6px; /* 水平右间距，数值越小间距越窄，可按需调整 */
  margin-bottom: 12px; /* 垂直下间距，控制上下行卡片的距离，可按需调整 */
}

3. 修改HTML中外层row的类名，绑定上面的自定义规则：

<div class="row card-wrap">
<!-- 下方col、card相关代码无需修改 -->

如果需要完全去掉栅格默认间距，直接给row加Bootstrap内置的no-gutters类即可，不需要额外写CSS。

备选方案（保留卡片自定义margin设置）

如果你不想修改栅格规则，要通过卡片自身的margin控制间距，直接修改.card的样式即可：

.card {
  width: 92%; /* 宽度+左右margin总和等于100%，避免布局错位 */
  min-height: 100px;
  margin: 0 4% 12px 4%; /* 左右margin控制水平间距，下margin控制垂直间距，数值可按需调整 */
}

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