Bootstrap卡片组间距怎么自定义_修改CSS的.card-group内边距

作者：袖梨 2026-07-24

.card-group 无内边距，修改无效；应通过 gap 类或卡片自身 margin/padding 控制间距与内容留白，gap 更语义清晰且响应式友好。

别碰 .card-group 的内边距 —— 它压根没内边距，改了也没用。 Bootstrap 5.3+ 的 .card-group 是个 display: flex 容器，子卡片之间靠的是 margin（默认无间隙），不是 padding。所谓“修改内边距”，本质是控制卡片之间的空隙，或者卡片内容与边框的距离，这两者完全不在一个层级上。

为什么给 `.card-group` 加 `px-3` 没反应？

因为 .card-group 本身不渲染内容，它只是 flex 容器，padding 类作用在它身上，只会撑开容器四周的空白，但卡片依然紧贴排列——你想要的“卡片间距”根本没出现。常见错误现象：

写了 <div class="card-group px-4">，DevTools 里看到 padding 生效了，但卡片还是挨着
想用 py-5 拉开上下距离，结果整个组往下移，卡片内部内容却没变
响应式类如 px-md-3 在小屏下失效，误以为是断点问题，其实是逻辑用错了

真正该操作的对象：卡片自身或卡片内部

要控制视觉上的“卡片间距”，有且只有两个可靠位置：

给每个 .card 加外边距：me-3（右外边距）或 mb-4（下外边距），注意用 me-* 替代 mr-* 以支持 RTL
给 .card 加内边距：p-3 或 px-4 py-3，这影响的是卡片内容（标题、文本、图片）离边框的距离，不是卡片之间的空隙
如果卡片是垂直堆叠（比如 .card-group 在小屏下），优先用 mb-3；如果是水平并排（大屏），用 me-3 更自然

更干净的方案：用 `gap` 替代 margin

Bootstrap 5.3+ 原生支持 gap 工具类，直接作用于 .card-group 即可，无需动单个卡片：

立即学习“前端免费学习笔记（深入）”；

<div class="card-group gap-3 gap-lg-4">  <div class="card">...</div>  <div class="card">...</div></div>

好处是：

语义清晰：gap 就是“子项间距”，不干扰卡片自身的 margin/padding
响应式友好：gap-lg-4 只在 ≥992px 时生效，小屏自动回退到默认无间隙
避免 margin 折叠问题：不用再担心 mt-4 在第一个卡片上被父容器吞掉
IE 不兼容？那说明你还在维护老项目，此时退回 .card:not(:first-child) { margin-left: 1rem; } 并确保 .card-group 是 flex