gap-3类没生效是因为父容器未设置d-flex等布局类，gap仅对flex或grid容器的直接子元素有效，且不兼容旧版Safari和IE。
gap-3类没生效，大概率是父容器没设d-flex
Bootstrap的gap-3这类工具类只对已启用Flex或Grid布局的容器起作用。它不会自动把display: block变成flex——如果你只写<div class="gap-3"><div>A</div><div>B</div></div>，DevTools里看到的display还是block，gap就完全静默。
必须显式加布局类：d-flex（水平）、d-flex flex-column（垂直）、d-grid等。卡片组.card-group、列表组.list-group本身已是flex，所以直接加gap-2就能用；但普通<div>不行。
- 检查computed style里的
display值，不是flex或grid就别指望gap工作 -
gap只作用于**直接子元素**，孙子元素加了也没反应 - 响应式写法如
gap-2 gap-md-4要确保父容器在各断点下都保持flex或grid
gap和margin混用会导致间距叠加，不是bug是规范行为
很多人以为加了gap-3就可以不管子项样式了，结果按钮组里每个.btn还挂着margin-right: 0.25rem，最终渲染出的间隙是gap + margin，视觉上明显过宽。
gap是容器级控制，margin是子项自身外边距，两者不冲突、不覆盖、不抵消——就是简单相加。尤其在.btn-group这种已有负边距合并逻辑的组件里，混用会直接破坏边框对齐。
- 用DevTools的Layout面板打开“Show all margins”，一眼看出哪些边距来自
margin、哪些是gap生成的空白 - 清掉子项的
margin：比如.btn-group > .btn { margin: 0; }，再放心用gap - 别依赖
!important硬覆盖，优先用更具体的选择器重置
Safari 14.5之前和IE完全不支持gap，且无降级提示
IE对gap零支持，连-ms-前缀都不认；Safari从14.5才开始完整支持Flex下的gap，14.4及更早版本会直接忽略声明，也不报错、不回退到margin方案。
这意味着你写gap: 1rem在旧Safari里等于没写——布局看起来“挤在一起”，但控制台不会警告，开发者容易误判为CSS加载失败或选择器错误。
- 用
@supports (gap: 0)做特性检测，但注意它在旧Safari里也返回false，不能当运行时兜底依据 - 兼容IE或老Safari时，必须手动降级：
.item:not(:first-child) { margin-left: 1rem; }（水平）或JS动态补class - Autoprefixer对
gap不加任何前缀，因为它根本没有标准前缀可加
Flex下row-gap/column-gap的命名和方向容易误解
在Flex容器中，row-gap控制的是**交叉轴**间距（即换行后的行间距），column-gap控制的是**主轴**间距（即同排内项间距），和Flex方向无关。哪怕你写了flex-direction: column，column-gap依然管的是“列”方向——也就是垂直方向上的项间距。
这个命名是CSS规范定的，和Grid一致，但和直觉相反。写gap: 8px 16px时，第一个值8px是row-gap（交叉轴），第二个是column-gap（主轴），顺序不能颠倒。
- 想单独调某方向？直接用
row-gap: 12px或column-gap: 20px，语义比双值gap更清晰 - Flex换行后，
row-gap才真正起作用；单行时只有column-gap生效 - 别拿
padding或margin的思维套用——gap不参与盒模型计算，但它会先从容器可用空间里切走这部分，再分配track宽度
