如何启用 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/bootstrapBootstrap 从 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 relstylesheet迁移 HTML 类名.row → .grid.col-* → .g-col-*CSS 编译好后把模板里的默认栅格类替换掉。迁移规则来自 CSS Grid 文档.row替换为.grid.grid设置display: grid并构建 grid 模板.col-*替换为.g-col-*因为 CSS Grid 列使用grid-column属性而非width原来靠负 margin 实现的 gutter 改为gap间距通过 CSS 变量--bs-gap控制。等宽三列文档中的 “Three columns” 示例div classgrid text-center div classg-col-4.g-col-4/div div classg-col-4.g-col-4/div div classg-col-4.g-col-4/div /div响应式布局窄屏两列、medium 断点以上三列div classgrid text-center div classg-col-6 g-col-md-4.g-col-6 .g-col-md-4/div div classg-col-6 g-col-md-4.g-col-6 .g-col-md-4/div div classg-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 - 1div classgrid text-center div classg-col-3 g-start-2.g-col-3 .g-start-2/div div classg-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上即可行内或样式表均可。这三个变量本身没有默认值浏览器在本地未设置时使用回退值变量回退值作用--bs-rows1网格模板行数--bs-columns12网格模板列数--bs-gap1.5rem列间距横向和纵向例如把 12 列网格临时改成 4 列、加大间距div classgrid text-center style--bs-columns: 4; --bs-gap: 5rem; div classg-col-2.g-col-2/div div classg-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没有负 marginmargin 工具类不能用来改 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考