修改$grid-columns必须在所有Bootstrap Sass导入前生效，即$grid-columns: 24;须为首个非注释非空行，随后按functions→variables→mixins→grid顺序显式导入，否则.col-24等类不会生成。
修改 $grid-columns 必须在所有 Bootstrap Sass 导入前生效
直接在 @import "bootstrap" 后覆盖 $grid-columns: 24 完全无效——变量已被读取并缓存，后续重定义不触发类生成。真正起作用的位置只有一个：所有 @import 语句之前，且必须是第一个非注释、非空行。
常见错误写法：
@import "bootstrap";<br>$grid-columns: 24;
→ 不生效
$grid-columns: 24;<br>@import "bootstrap/scss/bootstrap";
→ 仍大概率失效（bootstrap.scss 内部导入顺序不可控）
正确结构必须显式拆解并按依赖顺序导入：
$grid-columns: 24;@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";@import "bootstrap/scss/grid";
只导入 bootstrap/scss/grid.scss 无法生成完整栅格类
有人以为“我只要栅格，那就只 import grid”，结果编译后只有 .col-*，没有 .offset-md-* 或 .order-lg-* —— 因为 grid.scss 本身不包含断点变量 $grid-breakpoints 和响应式工具函数，这些来自 variables.scss 和 mixins.scss。
验证是否真生效的最简方式：
编译后搜索输出 CSS 文件中是否存在 .col-24 或 .offset-12；若没有，说明 $grid-columns 未被循环读取，大概率是漏了 variables 或 mixins 的导入。
注意：bootstrap/scss/bootstrap.scss 是个聚合入口，但它内部对变量重定义的支持不稳定，尤其在 Webpack/Vite 的 Sass 加载器下，推荐始终手动展开导入链。
.col-* 类宽度计算与响应式断点联动
设 $grid-columns: 24 后，.col-1 宽度不是硬编码的 4.166666667%，而是由 Sass 循环动态计算：width: percentage(1 / $grid-columns)。这意味着它严格依赖 $grid-columns 值，也继承 $grid-breakpoints 的断点定义逻辑。
例如：.col-md-12 在中等屏下占 50%（12/24），而非默认 12 列时的 100%；.col-xl-24 才是 100%，但如果你没定义 xl 断点，它就不会生成。
所以必须确认：
- $grid-breakpoints 已通过 variables.scss 加载（默认已含 xs/sm/md/lg/xl）
- 所有目标断点（如 md）都参与了 grid.scss 中的 @each 循环
- 不要跳过 @import "bootstrap/scss/utilities/flex" 等基础工具，否则 .row 的 display: flex 可能丢失
offset-* 和 order-* 的范围会随列数自动扩展
$grid-columns: 24 不仅影响 .col-*，还会让 .offset-* 支持到 .offset-24，.order-* 生成到 .order-25（因循环上限为 $grid-columns + 1）。
这容易引发两个实际问题：
- .offset-13 表示向右空出 13/24 ≈ 54.17%，但旧项目 CSS 里可能已有同名类做其他用途，造成样式冲突
- .order-25 这类高序号在绝大多数布局中无意义，却增加了 CSS 体积；若不需要，可在自定义变量后手动重置 $grid-order-max（需自行定义并 patch 循环逻辑）
更隐蔽的风险是：gutter 虽不直接受列数影响，但其百分比分配（如 margin-left: $grid-gutter-width / 2）在 Flex 容器中与列宽共同作用，24 列下相同 gutter 值视觉上会显得更“稀疏”，需同步评估设计稿的呼吸感是否匹配。
