Bootstrap默认禁用CSS Grid支持以减小体积，g-col-类不生效是因为未在Sass编译时启用$enable-cssgrid: true；必须在导入bootstrap变量后、主体前声明该变量，且不能混用.row/.col-与.grid/g-col-*，同时注意gap类与内联gap的叠加问题。
为什么 g-col-* 类不生效
直接引入 Bootstrap 5.2+ 的官方 CSS 文件（如 bootstrap.min.css）后，g-col-4、grid 这类 Grid 类名完全没样式——不是写错了，是默认根本没编译进去。Bootstrap 默认禁用 CSS Grid 支持，只为减小 CSS 体积和兼容旧浏览器。
你看到的文档示例能跑，是因为官方文档构建时手动启用了 $enable-cssgrid: true；你本地没配，就等于没这功能。
- 检查方式：打开编译后的 CSS 文件，搜索
g-col-或grid，如果找不到相关规则，说明未启用 - 不能靠 CDN 直接加参数或改 HTML class 激活，必须从 Sass 源码层重新编译
- Bootstrap 5.3 同样适用该机制，不是版本升级就能自动解锁
如何正确设置 $enable-cssgrid: true
关键不在“写没写”，而在“什么时候导入”和“导入顺序是否破坏变量覆盖”。Sass 变量必须在 Bootstrap 的 variables 和 functions 之后、bootstrap 主体之前声明，否则会被默认值覆盖。
推荐结构（以 style.scss 为例）：
立即学习“前端免费学习笔记（深入）”；
/* 1. 先导入 Bootstrap 基础依赖 */ @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/variables-dark"; @import "node_modules/bootstrap/scss/maps"; @import "node_modules/bootstrap/scss/mixins"; <p>/<em> 2. 紧接着覆盖变量 —— 必须在这一步 </em>/ $enable-cssgrid: true;</p><p>/<em> 3. 最后导入全部 Bootstrap </em>/ @import "node_modules/bootstrap/scss/bootstrap";
- 不要把
$enable-cssgrid: true放在@import "bootstrap"之后，那样无效 - 不要直接修改
node_modules/bootstrap/scss/_variables.scss，npm 更新会丢失 - 路径需根据你项目中
node_modules实际位置调整，比如用../node_modules/...
grid 容器和 .col-* 能否混用
不能直接套用。Bootstrap 的 .row 是 display: flex，而 .grid 是 display: grid；若把 .col-6 塞进 .grid 容器，它不会按预期占 6 列宽度——因为 .col-* 的宽度逻辑依赖 Flex 子项行为，Grid 下失效。
- 正确做法：用
g-col-*替代.col-*，例如<div class="grid"><div class="g-col-6">...</div></div> - 不要保留
.row或.col-*类同时加grid，会导致样式冲突、列宽塌缩或间距错乱 - 响应式断点要对齐：Bootstrap 的
md是768px，写媒体查询时别用767px或769px，否则g-col-md-6不触发
启用后要注意 gap 类重复叠加
Bootstrap 的 .g-3、.g-lg-4 底层就是 gap: var(--bs-gap)；如果你又在容器上写 style="gap: 1rem" 或自定义 CSS 设了 gap，两者会叠加，导致间距翻倍。
- 纯 Grid 场景：只用
.g-*类控制间距，删掉所有内联gap或额外 CSS - 需要动态控制：用
style="gap: var(--bs-gap)"复用 Bootstrap 的 CSS 变量，避免硬编码数值 -
--bs-gap默认为1rem，但可被$spacerSass 变量影响，别假设它永远是16px
真正麻烦的不是启用 Grid，而是忘了它和 Flex 栅格不能共存、变量覆盖顺序一错全错、以及 gap 这种看似无害却悄悄放大的细节。
