修改$grid-columns后编译不生效，因变量必须在@import Bootstrap Sass文件前定义，且需完整导入functions、variables、mixins、grid等模块；否则.col-*等类不会生成。
修改 $grid-columns 变量后编译不生效
Bootstrap 5 的栅格列数由 Sass 变量 $grid-columns 控制，默认是 12。但直接改它不一定起作用——因为 Bootstrap 的栅格类（如 .col-6、.col-md-4）是通过循环生成的，而这个循环依赖于 $grid-columns 的值，但前提是你的自定义变量必须在引入 Bootstrap 源文件 之前 覆盖它。
常见错误是：在 @import "bootstrap" 之后才写 $grid-columns: 24;，此时变量已被读取，重定义无效。
- 确保自定义变量写在
@import任何 Bootstrap Sass 文件之前 - 如果你用的是 Bootstrap 官方 npm 包，需从
bootstrap/scss/functions开始按顺序导入，不能只@import "bootstrap" - 推荐结构：
$grid-columns: 24;→@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→@import "bootstrap/scss/mixins";→@import "bootstrap/scss/grid";
自定义列数后 col-* 类没生成
即使 $grid-columns 正确覆盖，仍可能看不到新列类（比如没有 .col-17），原因通常是漏掉了关键模块的导入，或者用了预编译的 CSS 文件（bootstrap.min.css）而非源码编译。
Bootstrap 的响应式栅格类由 bootstrap/scss/grid.scss 中的 @each 循环生成，它依赖 $grid-columns 和 $grid-breakpoints。如果跳过 grid.scss 或只导入 bootstrap.scss（它内部会跳过部分逻辑），循环就不会执行。
- 不要直接引用 CDN 上的
bootstrap.min.css，它固定为 12 列 - 确认你导入的是
bootstrap/scss/grid.scss，而不是只靠bootstrap/scss/bootstrap.scss—— 后者在某些构建配置下可能忽略重定义后的变量 - 检查编译输出的 CSS，搜索
.col-24是否存在，来验证是否真被生成
改变列数对 offset-、order- 和 gutter 的影响
$grid-columns 不只影响 .col-* ，还联动控制 .offset-*、.order-* 的步进范围，以及 $grid-gutter-width 的计算上下文（虽然 gutter 本身不直接受列数影响，但它的百分比分配逻辑会变）。
例如设 $grid-columns: 24 后，.offset-12 表示向右空出一半宽度（12/24），而不再是原来的 12/12=100%；.order-25 也会被生成（因为循环到 24+1），这可能造成意料外的层叠顺序。
-
$grid-columns增大后，offset-类的“最大偏移量”同步增大，要注意布局是否仍可控 -
order-默认生成到$grid-columns + 1，24 列就会有.order-25，但多数场景用不到这么高的序号，可配合$grid-order-max（Bootstrap 5.3+）限制 - 如果项目中大量使用
col-auto或flex-grow，列数变化几乎无感；但若重度依赖col-3这类硬编码，就得全盘检查比例关系
兼容性与维护成本提醒
改列数不是“改个数字就完事”的操作。它会让团队成员面对非标准栅格系统，第三方基于 Bootstrap 的组件（比如日期选择器、表格插件）可能默认按 12 列写死样式，导致错位或溢出。
更隐蔽的问题是设计稿协同：UI 设计师用的是 12 列 Sketch/Figma 模板，前端却用 24 列，间距换算容易出错，每次对齐都要心算除以 2。
- 除非真实需要细分控制（如复杂仪表盘、多栏报表），否则不建议偏离 12 列
- 如果只是想让某块区域更细粒度，优先考虑嵌套栅格或
col+flex组合，而非全局改列数 - 一旦改了，后续升级 Bootstrap 版本时，要重新核对所有自定义变量和导入顺序，Sass 变更频繁的版本（如 5.2→5.3）容易 break
