Bootstrap 5中如何使用CSS Grid布局_通过启用$enable-css-grid配置-css教程-PHP中文网

bootstrap默认禁用css grid支持以减小体积，g-col-类不生效是因为未在sass编译时启用$enable-cssgrid: true；必须在导入bootstrap变量后、主体前声明该变量，且不能混用.row/.col-与.grid/g-col-*，同时注意gap类与内联gap的叠加问题。

bootstrap 5中如何使用css grid布局_通过启用$enable-css-grid配置

为什么 `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 为例）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

/* 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";</p>

不要把 $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 不触发