gap-类必须配合d-flex或d-grid才生效；它仅作用于flex/grid容器的子项间间隙，不适用于block元素，且不可与g-、px-*混用。
gap-*类必须配合d-flex或d-grid才生效
直接写gap-3却没看到间距，八成是父容器没启用弹性布局。Bootstrap 的 gap-* 类不是“通用间距工具”，它只对 display: flex 或 display: grid 的容器起作用——而这个 display 值得靠 d-flex、d-grid 等类显式设置。如果你只写 <div class="gap-3">
<div>a</div>
<div>b</div>
</div>，浏览器默认把它当 block 元素渲染，gap-3 就彻底静默失效。
检查方法很简单：打开 DevTools，看该父元素的 Computed Styles 里 display 是不是 flex 或 grid。不是？那就补上 d-flex（水平）或 d-flex flex-column（垂直），再试。
gap-*和justify-content-between不是一回事
有人想“均匀间距”就下意识用 justify-content-between，结果发现只有首尾贴边、中间一个空隙——那是错的。它只适用于**2个或3个元素且需首尾锚定**的场景，不解决“多个元素之间等距”的问题。
gap-* 才是真·均匀控制子项间隙的方案，它在每个相邻子元素之间插入固定值（比如 gap-3 = 1rem），且不干扰容器边缘。关键点：
-
gap-*作用于容器，影响所有直接子元素之间的间隙（不含容器内边距） - 它和
margin无关，不会触发 margin collapse，也不受 RTL 影响 - 响应式写法如
gap-2 gap-md-4，小屏 0.5rem，≥768px 时升为 1.5rem
典型安全用法：<div class="d-flex gap-3">
<button>A</button><button>B</button><button>C</button>
</div>
别混用gap-*和g-*或px-*
gap-3、g-3、px-3 名字像，但干的事完全不同，混着用容易白忙活：
-
gap-3：Flex/Grid 容器的子项间间隙 -
g-3：仅对.row生效的栅格 gutter 工具类（底层也是 gap，但被 Bootstrap 限制了作用域） -
px-3：给自身加左右 padding，和兄弟元素位置无关
常见误操作：<div class="row g-3 px-3">——<code>px-3 让整行变宽，但列间距还是由 g-3 控制，视觉上是“内容区缩进 + 列间有缝”，容易误判成“列间距变大”。真要调列间距，删掉 px-3，只留 g-3 就够了。
卡片组、列表组这些组件已内置flex，可直接加gap
.card-group 和 .list-group（Bootstrap 5.3+）默认就是 display: flex（垂直方向），所以不用改结构，直接加 gap-* 就能统一控制子项间距：
<div class="card-group gap-3"> → 卡片之间 1rem 间隙 <li> <code><ul class="list-group gap-2 gap-lg-4"></ul>→ 小屏 0.5rem，大屏 1.5rem
注意：别再给每个 .card 单独加 mb-3 模拟间距——这会和 gap-* 叠加，还可能在 RTL 下错位，也破坏语义一致性。
真正卡住人的地方，往往不是不知道 gap-3 这个类，而是忘了它根本不会自动激活父容器的 flex 行为。多一个 d-flex，世界就清晰了。
