企业官网建设流程全解析

如何启用 Bootstrap 实验性 CSS Grid 布局系统？$enable-cssgrid 开启与 .grid / g-col-* 类迁移写法

【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrap

Bootstrap 从 v5.1.0 起内置了一套基于原生 CSS Grid 的备用布局系统，与默认的.row/.col-*栅格并存。它默认关闭、处于实验状态（官方在 迁移文档 中标注为 “not yet ready for production use”），需要通过 Sass 变量显式开启。本文的任务是：在自己的项目里启用这套系统，并把 HTML 中的默认栅格类迁移成.grid/.g-col-*写法，最后验证编译产物确实生成了对应的类。

前提是使用 Bootstrap 的源 Sass 文件自行编译（通过 npm 或手动下载源码），而不是直接使用预编译的 CSS 包——$enable-cssgrid只在 Sass 编译阶段生效。

准备：custom.scss 的导入顺序

按 Sass 定制文档 的文件结构，项目里有一个自己的入口样式表，导入 Bootstrap 源文件：

your-project/ ├── scss/ │ └── custom.scss └── node_modules/ └── bootstrap/ ├── js/ └── scss/

custom.scss的导入顺序有硬性要求：变量覆盖必须放在functions导入之后、其余导入之前。下面是开启 CSS Grid 的完整写法：

// Custom.scss // 1. 先导入 functions（否则可用函数不可用） @import "../node_modules/bootstrap/scss/functions"; // 2. 变量覆盖区：关闭默认栅格类，开启实验性 CSS Grid $enable-grid-classes: false; $enable-cssgrid: true; // 3. 导入其余必需文件 @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"; @import "../node_modules/bootstrap/scss/root"; // 4. 按需导入组件，必须包含 grid @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; // ...

这里两个变量必须同时设置，缺一不可：

• $enable-grid-classes: false——默认值为true，置为false后停止生成.row、.col-md-1等默认栅格类；
• $enable-cssgrid: true——默认值为false，置为true后才生成.grid、.g-col-4、.g-start-2等实验性类。

两个变量的定义与默认值可见 scss/_variables.scss 第 377–379 行，变量说明见 Options 文档。

注意：$enable-grid-classes: false只停止栅格类生成，不再影响容器类（.container等仍会生成），这一点在 迁移文档 中有明确说明。

执行：重新编译 Sass 并引入产物

编译命令来自 Sass 文档。npm install -g sass会把 Sass 编译器安装到全局 npm，需要本机有 Node.js 和 npm 执行权限；sass --watch会常驻监听文件变化：

# 安装 Sass CLI（全局安装） npm install -g sass # 监听并编译 custom.scss 到 CSS sass --watch ./scss/custom.scss ./css/custom.css

编译成功后在 HTML 中引入产物（路径按你实际的输出位置调整）：

<link href="/css/custom.css" rel="stylesheet">

迁移 HTML 类名：.row → .grid，.col-* → .g-col-*

CSS 编译好后，把模板里的默认栅格类替换掉。迁移规则来自 CSS Grid 文档：

1. .row替换为.grid（.grid设置display: grid并构建 grid 模板）；
2. .col-*替换为.g-col-*（因为 CSS Grid 列使用grid-column属性而非width）；
3. 原来靠负 margin 实现的 gutter 改为gap，间距通过 CSS 变量--bs-gap控制。

等宽三列（文档中的 “Three columns” 示例）：

<div class="grid text-center"> <div class="g-col-4">.g-col-4</div> <div class="g-col-4">.g-col-4</div> <div class="g-col-4">.g-col-4</div> </div>

响应式布局：窄屏两列、medium 断点以上三列：

<div class="grid text-center"> <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> </div>

.g-col-*类由 mixin 按断点循环生成，选择器形如.g-col-#{$i}输出grid-column: auto / span $i;，响应式后缀（-md-等）的生成逻辑与默认栅格一致，见 scss/mixins/_grid.scss。

替代原 offset 类的是Start 类：.g-start-2对应grid-column-start: 2，起始值从1开始（0是grid-column-start的非法值），且最大到$grid-columns - 1：

<div class="grid text-center"> <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div> <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div> </div>

另一个行为差异：.grid的直接子元素即使不加任何类，也会自动占一列（auto columns），并且可以和.g-col-*混用。

结果验证

验证分两步。

1. 检查编译产物。在./css/custom.css中搜索以下选择器，它们的存在说明变量已生效。.grid的基础规则可直接在 scss/_grid.scss 中看到对应的源码：

.grid { display: grid; grid-template-rows: repeat(var(--bs-rows, 1), 1fr); grid-template-columns: repeat(var(--bs-columns, 12), 1fr); gap: var(--bs-gap, 1.5rem); }

同时应能搜到.g-col-4、.g-col-md-4、.g-start-2等类；如果搜索不到，说明$enable-cssgrid覆盖没写对（常见原因是变量覆盖放错了导入顺序）。

2. 浏览器目测。打开页面后，三列示例应并排显示且横向纵向都有间距；用开发者工具查看.grid元素，确认计算样式包含display: grid与gap: 1.5rem，子元素的grid-column为auto / span 4。

自定义与限制

CSS 变量调参。列数、行数和间距通过本地 CSS 变量设置，写在父级.grid上即可，行内或样式表均可。这三个变量本身没有默认值，浏览器在本地未设置时使用回退值：

例如把 12 列网格临时改成 4 列、加大间距：

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;"> <div class="g-col-2">.g-col-2</div> <div class="g-col-2">.g-col-2</div> </div>

--bs-gap支持单值（四边相同）或一对值（纵向 横向），也可以直接用row-gap/column-gap单独调整。

嵌套会继承变量。与默认栅格不同，嵌套的.grid会继承外层的列数和间距。需要恢复默认时要在嵌套实例上重置，例如外层style="--bs-columns: 3"、内层style="--bs-columns: 12;"（文档 “Nesting” 示例）。

已知行为差异（来自 CSS Grid 文档 的 “Key differences”）：

• Flex 工具类对 CSS Grid 列的作用方式不同；
• .grid没有负 margin，margin 工具类不能用来改 grid 间距，只能用gap相关变量；
• 行内/自定义样式（如style="--bs-columns: 3;"）应被视为修改器类的替代（对应默认栅格的row-cols-3）。

类数量的 Sass 限制。.g-col-*的生成仍受$grid-columns（默认12）和$grid-gutter-width（默认1.5rem）控制，编译后的类集合是固定的。文档给出的两条出路：修改这两个 Sass 变量后重新编译，或者用行内/自定义样式（--bs-columns、--bs-gap、grid-column: span N）在已有类之外补充。

最后再强调一次边界：这套系统自 v5.1.0 起为实验性功能，官方文档明确标注尚不准备用于生产环境。启用它之前，确认项目里没有依赖.row/.col-*的存量代码，或已按上文全部迁移为.grid/.g-col-*。

【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrap