<p>Bootstrap 5 的 .col-* 无法实现5列等宽，因其栅格系统基于12列总宽，而5不是12的约数；需启用CSS Grid（$enable-cssgrid: true）或直接使用原生display: grid实现。</p>
为什么 Bootstrap 5 的 .col-* 无法实现 5 列等宽
Bootstrap 默认栅格基于 12 列总宽，所有 col-* 类（如 col-3、col-4）都必须是 12 的约数；5 不是 12 的约数，所以没有 col-5 或 col-2.4 这类类名。硬凑 col-2 × 5 会占满 10/12 宽度，留白；col-3 × 5 则超限（15 > 12），触发换行。
这不是 Bug，而是设计约束——它保障了断点一致性，但也牺牲了任意等分数的灵活性。
启用 Bootstrap 5.2+ 的 g-col-* 前必须设 $enable-cssgrid: true
直接引入官方 bootstrap.min.css 后，g-col-4、grid 这些类完全无效，因为 Bootstrap 默认禁用 CSS Grid 支持以减小体积。你看到的文档示例能跑，是因为官方构建时手动启用了该变量。
-
$enable-cssgrid: true必须在导入bootstrap/scss/functions和variables之后、bootstrap/scss/bootstrap之前声明 - 不能写在
@import "bootstrap"后面，否则被默认值覆盖 - 不能改
node_modules里的源文件，npm 更新会丢失 - 路径要按你项目中
node_modules实际位置调整，比如../node_modules/bootstrap/scss/...
启用后，.grid 容器 + .g-col-* 才真正生效，且与 .row/.col-* 互斥——混用会导致宽度计算错乱。
立即学习“前端免费学习笔记（深入）”；
用原生 display: grid 替代 .row 更干净
如果你不需要 Bootstrap 的栅格语义（比如响应式断点自动切换列数），直接上原生 CSS Grid 反而更可控、更轻量，也避免和 Bootstrap 的 Flex 布局打架。
例如实现严格 20% 等宽五列：
.grid-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
HTML 中只需：
<div class="grid-5"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>
注意：不要给这个容器加 .row 类，否则 display: flex 会覆盖 display: grid；也不要用 .col-* 子元素，它们的 width/flex 规则在 Grid 下无意义。
嵌套复杂布局时，Grid 比多层 .row 更可靠
Bootstrap 栅格嵌套超过三层就容易出问题：DOM 层级膨胀、高度不一致、调试困难。比如卡片内部结构差异大，外层 .row 下的 .col-* 高度失衡，下一行整体错位。
这时用 Grid 定义区域更直观：
.dashboard-grid {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 300px;
}
.area-header { grid-area: header; }
.area-nav { grid-area: nav; }
.area-main { grid-area: main; }
.area-aside { grid-area: aside; }
.area-footer{ grid-area: footer; }
关键点：
- 不用
.container或.row，避免嵌套污染 - 响应式只需改
grid-template-areas和grid-template-columns，比一堆col-md-4 col-lg-3更易读 - IE11 不支持，若需兼容，得加降级方案（比如 fallback 用 Flex）
真正难的不是写对 Grid 语法，而是判断什么时候该放弃 Bootstrap 栅格——尤其是当你要控像素、做非 12 倍数等分、或嵌套超过两层时，硬套 .col-* 只会让 CSS 越来越不可维护。
