直接改$grid-columns:10不会生成.col-10类，因变量需在Bootstrap模块链（functions→variables→mixins→grid）导入前定义且完整加载，否则不生效；row-cols-10不能替代10列等宽布局；推荐自定义类或CSS Grid实现。
直接改 $grid-columns: 10 不会生成 .col-10 类
Bootstrap 5 的栅格类（如 .col-1 到 .col-12）是通过 bootstrap/scss/grid.scss 中的 @each 循环动态生成的，循环上限硬编码为 $grid-columns 变量值。但如果你只是在 @import "bootstrap" 之后写 $grid-columns: 10，它根本不会生效——变量早已被读取并缓存。
更关键的是：即使你提前定义了 $grid-columns: 10，也必须完整导入 Bootstrap 的 Sass 模块链：functions → variables → mixins → grid。跳过其中任一环节（比如只导入 bootstrap.scss），grid.scss 就无法读取你重定义的变量，最终 CSS 里连 .col-10 都不会出现。
验证是否成功：编译后搜索输出 CSS 文件中是否存在 .col-10。没有？说明变量没被消费，不是“改了没用”，而是“根本没进生成流程”。
row-cols-10 不能替代 10 列等宽布局
row-cols-10 的作用是限制「每行最多显示几个 .col 子项」，它不控制单个列的宽度，也不生成新类。它的底层逻辑仍是基于默认 12 列体系做空间分配——10 个 .col 会被均分剩余宽度，但每个列仍按 flex: 1 自适应，受内容、内边距、字体撑开等干扰，极易换行或错位。
- 当你混用
.col-6和.col，布局立刻崩坏，因为前者按 12 列算 50%，后者是 auto-fit，二者计算基准冲突 -
row-cols-10+.col在小屏下大概率触发折行，尤其当列内容稍多时 - 它无法提供语义化宽度控制（比如“第 3 列占 20%”，“第 7 列偏移 40%”），
.offset-*等辅助类依然绑定在 12 列系统上
真正可行的 10 列方案：自定义 class 或 CSS Grid
绕过 Bootstrap 栅格源码修改，最稳定的做法是加轻量级自定义类，复用其断点机制但指定精确宽度：
.col-1-10 { width: 10%; } —— 超小屏起生效@media (min-width: 768px) { .col-md-1-10 { width: 10%; } }@media (min-width: 992px) { .col-lg-1-10 { width: 10%; } }
注意必须加 flex: 0 0 auto（否则 width 在 Flex 容器中被忽略），且首列要重置 margin-left: 0 避免 gutter 错位。
更现代的选择：直接用原生 CSS Grid（Chrome 66+/Firefox 63+/Safari 16.4+ 支持）：
.grid-10 {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 0.5rem;
}
@media (max-width: 991.98px) {
.grid-10 {
grid-template-columns: repeat(5, 1fr);
}
}
无需侵入 Bootstrap 源码，无命名污染，响应式切换干净利落。
为什么不用 col-1 拼 10 个？
col-1 是 12 列体系下的单位，10 个 col-1 总宽 ≈ 83.3%，留有安全余量防止溢出，这是它能稳定单行的关键。但你要的是“10 列等分 100%”，不是“10 个 1/12 单位”。强行用 col-1 实现视觉上的 10 等分，本质是妥协：靠留白换稳定，而非真正 10 列栅格。
容易被忽略的点：$grid-columns 增大后，.order-* 和 .offset-* 的生成范围也会同步扩大（例如设为 10 后会生成 .order-11），但这些类极少被用到；而你真正需要的列宽精度、断点控制、gutter 行为，在未修改源码的前提下，自定义 class 或 CSS Grid 才是最可控的路径。
