.g-类在grid容器中导致双倍间隙，因其本身声明gap:1rem，若容器已设gap:1rem则叠加为2rem；应删掉g-类，改用style="gap:var(--bs-gap);"或响应式css变量控制。
Bootstrap 的 .g-* 类在纯 CSS Grid 容器中会叠加出双倍间隙，根本原因是它和原生 gap 属性作用机制冲突——.g-3 本身就会设 gap: 1rem，若容器已是 display: grid，再额外写 gap: 1rem，浏览器就真按 2rem 渲染。
为什么 .g-* 在 Grid 容器里会让间隙变大
.g-* 类不是“开关”，而是直接注入 gap 声明的 CSS 规则。当你写：
<div class="my-grid g-3"></div>等价于同时声明：
display: grid;<br>gap: 1rem;如果
.my-grid 自身样式里还写了 gap: 1rem（比如在 Sass 中全局设置），最终计算值就是 1rem + 1rem。
- Chrome/Firefox 现代版本会叠加数值，不是覆盖
- Safari ≤16.4 对
gap解析更保守，但叠加行为依然存在 - 这种叠加不报错、不警告，只默默让卡片/按钮之间空出两倍距离
如何安全地在 Grid 容器中复用 Bootstrap 间隙变量
想保持设计系统一致性，又不想手动硬编码 1rem？用 Bootstrap 提供的 CSS 自定义属性：
- 删掉所有
g-*类，避免重复注入gap - 在 Grid 容器上直接写：
style="gap: var(--bs-gap);" - 需要响应式间隙时，用媒体查询 +
var(--bs-gutter-x)或var(--bs-gutter-y)（Bootstrap 5.3+ 支持） - 确认你没在父级或祖先元素上也设了
gap，否则仍可能叠加
混用 Bootstrap 栅格类（如 .col-md-6）和 Grid 布局时的间隙陷阱
把 .col-* 当普通子元素放进 Grid 容器，看似省事，但间隙控制极易失控：
-
.col-*类本身不含gap，但它们的padding是为 Flex 场景设计的（配合.row的负margin） - Grid 容器里没有
.row的负边距来抵消.col的padding，结果是：列内容被内边距撑开，视觉上像“多了一层间隙” - 正确做法是移除
.col-*，改用grid-column: span 6或grid-area显式控制跨度 - 如果非要保留
.col-*，必须加px-0清除左右padding，并确保box-sizing: border-box全局生效
最易被忽略的一点：间隙异常往往不是单一原因，而是 gap + .col padding + border-box 缺失三者叠加的结果。真机调试时，先关掉所有自定义样式，只留 display: grid 和 gap，再一层层加回，才能准确定位哪一环在“偷偷加空”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
