gap类仅对display: flex或grid的父容器生效，且须为直接子元素间距；需显式添加d-flex/d-grid，不支持单独设置行列间隙，取值基于$spacer缩放，响应式写法如gap-md-3。
gap 类在 Bootstrap 5 Flex 容器中是否生效
只对 display: flex 或 display: grid 的父容器有效，且必须是直接子元素之间的间距。如果你给一个普通 div 加了 gap-3 却没反应，大概率是因为它没被设成 flex —— Bootstrap 不会自动帮你加 class="d-flex"。
常见错误现象：gap-4 加了但子元素紧贴着，检查 computed style 会发现父元素 display 是 block。
- Flex 容器必须显式声明：
class="d-flex"（或d-inline-flex） - Grid 容器同理：
class="d-grid" - 不支持嵌套 flex 子项内部再用 gap 控制其子项间距（那是下一层的事）
gap-* 类的取值和单位逻辑
Bootstrap 5 的 gap 类基于 spacing scale，数值对应 $spacer * n（默认 $spacer: 1rem），所以 gap-2 = 0.5rem，gap-5 = 3rem。注意：它同时控制 row-gap 和 column-gap，不能单独设置某一个方向。
使用场景：当你需要等距的行列间隙，比如卡片列表、表单字段组、按钮组。
-
gap-0到gap-5覆盖常用尺寸，gap-auto无效（CSS 不支持gap: auto） - 响应式写法如
gap-md-3表示仅在md及以上生效，优先级高于无断点版本 - 如果需要只控制垂直或水平间距，得退回到原生 CSS：
style="row-gap: 1rem"或自定义 class
与 margin/padding 混用时的冲突表现
gap 是布局内建间距，不触发重排，也不影响盒模型尺寸；而 mb-2 这类 margin 类会撑开父容器、可能引发换行或滚动条。两者叠加容易导致“看起来间距过大”或“响应式错位”。
典型错误：给 flex 子项同时加 gap-3 和 mb-2，结果纵向间距变成 gap + margin 双倍。
- Flex 容器内，优先用
gap，别再给每个子项加mb-/me- - 如果子项本身有 padding，gap 不会“挤掉”它，而是额外增加——这是预期行为，不是 bug
- IE 不支持
gap（哪怕加了-ms-前缀也没用），需降级方案：用mx-n*+px-*模拟
在 inline-flex 或 flex-wrap 场景下的实际表现
gap 在 d-inline-flex 中照常工作，但要注意容器宽度不足时，flex-wrap: wrap 下的换行间隙仍由 gap 控制——即新行首项和上一行末项之间也有 gap，这点常被忽略。
性能影响几乎为零，但若在大量动态生成的 flex 列表中高频切换 gap 类，可能触发 layout thrashing（尤其配合 JS 测量）。
- 换行后，第一行末尾与第二行开头的间距 =
gap值，不是 0 - 不支持
gap与justify-content: space-between联动“均分剩余空间”，gap 是固定值 - 服务端渲染（如 SSR）中，gap 类不会引起 FOUC，但依赖 JS 的布局库（如某些图表容器）可能因初始无 flex 导致 gap 失效
真正麻烦的是跨浏览器一致性：Firefox 和 Safari 对 gap 在 inline-flex 中的 baseline 对齐处理略有差异，如果子项高度不一致，视觉上可能感觉“没对齐”。这时候别硬调 gap，改用 align-items 或 min-height 更稳。
