bootstrap 5 的 gap 类仅对 display: flex 或 display: grid 容器生效，需配合 d-flex 或 d-grid 等显示类使用；gap-0 至 gap-5 对应 0–3rem，支持 gap-x/gap-y 分向控制；grid 中 gap 失效常因子元素非直接子项；超出 gap-5 需手动扩展 spacing；gap 与 margin 混用会导致间距叠加，应统一方案。
Bootstrap 5 的 gap 类名怎么写才生效
Bootstrap 5 默认只对 display: flex 或 display: grid 容器支持 gap 工具类，直接套在 <div> 上但没设 display 属性，<code>gap 就完全不生效——这是最常见的“写了没反应”原因。
必须显式添加 flex 或 grid 相关 display 类，比如：
<div class="d-flex gap-3"> <div>Item 1</div> <div>Item 2</div> </div>
-
gap-0到gap-5对应 0–3rem（步长 0.25rem），gap-xxs等自定义值需自行扩展 -
gap-x-*/gap-y-*可分别控制水平/垂直间距，适用于 flex 容器（grid 中也有效） - 注意：
gap在 IE 中完全不支持，若需兼容 IE，得回退到margin手动控制
为什么 gap-3 在 Grid 布局里没起作用
Grid 容器中 gap 生效的前提是：容器本身用了 display: grid，且子元素是直接子项（不是嵌套 wrapper）。如果中间多包了一层 <div>，那 <code>gap 就只作用于那层 wrapper，而非你预期的卡片或按钮。
典型错误写法：
<div class="d-grid gap-3">
<div>
<div class="card">...</div> <!-- 这个 card 不是 grid 直接子项 -->
</div>
</div>
- 修正方式：删掉多余 wrapper，让
card成为d-grid的直接子元素 - Grid 中
gap等价于row-gap+column-gap，所以gap-y-2实际设置的是row-gap - 如果用
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，gap仍正常工作，无需额外 hack
想调大一点，但 Bootstrap 没提供 gap-6 怎么办
Bootstrap 5 默认只内置到 gap-5（3rem），超出需手动扩展。最稳妥的方式是在自定义 CSS 中复用 Bootstrap 的 spacing scale，避免脱离设计系统。
推荐做法（Sass 用户）：
$spacers: map-merge($spacers, (6: 3.5rem, 7: 4rem));
纯 CSS 用户可直接加：
.gap-6 { gap: 3.5rem !important; }
.gap-y-6 { row-gap: 3.5rem !important; }
.gap-x-6 { column-gap: 3.5rem !important; }
- 别用
!important覆盖已有类时，优先考虑增加特异性（如.my-container .gap-6） - 如果项目用了 Bootstrap 的 SCSS 变量，建议统一改
$spacers后重新编译，比零散加类更可控 - 注意：修改后所有
gap-*类都会受影响，包括gap-x/gap-y
Flex 容器里 gap 和 margin 混用会冲突吗
会。尤其是当子元素自己设置了 margin-right 或 margin-bottom，再叠加 gap，会导致间距翻倍或错位——这不是 bug，而是 CSS 规范明确规定的：gap 是容器级间隔，margin 是元素级间隔，二者叠加计算。
- 调试技巧：用浏览器开发者工具检查元素 computed styles，看
gap是否被正确应用，再逐个禁用子元素的 margin - 最佳实践：选一种方案贯穿到底。用
gap就清空子项的margin；用margin就不用gap - 特别注意响应式场景：
gap-3在sm断点下可能变成gap-sm-2，但子项的mb-sm-0若没同步清除，就会残留干扰间距
实际项目里最容易忽略的是 display 上下文和子元素层级关系——写完 class 先看 computed tab 里 display 和 gap 是否都 active，再查子元素是否真正在该容器直系下。
