必须在@import前定义$grid-columns变量，正确顺序为：$grid-columns: 24;→@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→@import "bootstrap/scss/mixins";→@import "bootstrap/scss/grid";否则变量不生效。
修改 $grid-columns 必须在 @import 之前定义
直接改 variables.scss 里的 $grid-columns: 24 不生效，是因为 Bootstrap 的 Sass 模块在首次读取变量时就已固化值。你必须把自定义变量写在任何 @import 语句之前，且顺序不能错。
常见错误写法：@import "bootstrap/scss/bootstrap.scss"; $grid-columns: 24;——此时变量已被编译器读过，重定义无效。
正确导入顺序（缺一不可）：
$grid-columns: 24;@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";@import "bootstrap/scss/grid";
注意：不能只 @import "bootstrap" 或 @import "bootstrap/scss/bootstrap.scss"，它们内部会跳过部分逻辑，导致 .col-13 到 .col-24 根本不生成。
验证 .col-* 是否真被编译出来
改完后别急着刷新页面——先检查输出 CSS 里有没有你想要的类名。搜索 .col-24 或 .offset-12，如果没出现，说明编译失败或模块漏了。
容易忽略的点：
- 用了预编译的
bootstrap.min.css？它永远是 12 列，改变量毫无意义 - 构建工具（如 Vite、Webpack）是否启用了 Sass 源码解析？确认它不是从
node_modules/bootstrap/dist/css/直接拷的 CSS - 是否清除了构建缓存？尤其用 Dart Sass 时，变量覆盖失败常因缓存未刷新
一个快速验证方式：在自定义 Sass 文件末尾加 body::before { content: "#{$grid-columns}"; }，浏览器里看到 24 就说明变量确实生效了。
$grid-columns 增大会连带影响 offset- 和 order-
设成 24 列后，.offset-12 表示空出 50% 宽度（12/24），不再是原来 12/12=100%；.order-25 也会被生成（因为循环到 $grid-columns + 1）。这未必是你想要的。
如果你只要扩展列宽范围，但不想让 order- 类爆炸式增长，Bootstrap 5.3+ 提供了 $grid-order-max 变量来限制上限：
$grid-columns: 24;-
$grid-order-max: 12;// 只生成 .order-0 到 .order-12
另外注意：offset- 类的步进单位变小了，原来 .offset-1 是 8.33%，现在是 4.17%（1/24），微调更精细，但也更容易误判视觉效果。
替代方案：不碰源码也能实现 5 列 / 10 列布局
真要改列数，多数项目其实不需要动 $grid-columns。比如要做 5 列等宽，最稳的方式是新增 class：
.col-md-5ths { width: 20%; flex: 0 0 auto; }
关键细节：
- 必须写
flex: 0 0 auto，否则在.row（Flex 容器）里width会被忽略 - 记得重置首列
margin-left，否则默认 gutter 会让第一列左偏 15px - 如果要用 offset，得自己写
.col-md-offset-40（对应 2 列宽度 = 40%）
更现代的做法：直接上原生 CSS Grid。一行代码搞定响应式 5 列，不污染 Bootstrap 全局样式，也不依赖编译流程：
.my-5-col-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
真正难的从来不是“怎么改成 24 列”，而是改完之后，.offset-13 到底该不该存在、.order-25 会不会意外打乱卡片排序、以及团队里其他人能不能一眼看懂你写的 col-19 是什么意思。
