根本原因是变量覆盖时机错误或导入路径不完整：$grid-columns: 24;必须写在@import "bootstrap/scss/functions"之前，并按顺序导入functions、variables、mixins、grid模块，且须使用源码编译而非bootstrap.min.css。
修改 $grid-columns 后编译没生成 .col-24 类
根本原因是变量覆盖时机错误或导入路径不完整。Bootstrap 5 的栅格类（如 .col-1 到 .col-24）由 bootstrap/scss/grid.scss 中的 @each 循环动态生成，该循环读取的是编译时已确定的 $grid-columns 值——不是你写在 @import "bootstrap" 之后的值。
必须确保：
-
$grid-columns: 24;写在所有@import语句之前 - 按顺序显式导入：
@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→@import "bootstrap/scss/mixins";→@import "bootstrap/scss/grid"; - 不能只写
@import "bootstrap/scss/bootstrap";，它内部逻辑可能跳过重定义后的变量处理 - 确认你用的是源码编译（如 Sass CLI、Vite、Webpack + sass-loader），而非直接引用
bootstrap.min.css（它永远是 12 列）
编译后检查输出 CSS 文件里是否存在 .col-24 或 .offset-12，这是最直接的验证方式。
24 列下 .offset-* 和 .order-* 的行为变化
$grid-columns 不只是改宽度，它会联动影响所有基于列数计算的工具类。设为 24 后，.offset-12 表示向右空出 50% 宽度（12/24），而不是原来 12 列下的 100%；.order-25 也会被生成（因循环到 $grid-columns + 1）。
这意味着：
- 原有
.offset-6在 12 列下是 50%，在 24 列下变成 25%，布局可能突然变紧凑 -
.order-13到.order-25全部可用，但多数项目根本用不到这么高的序号，反而增加 CSS 体积 - 若想限制
.order-*最大生成到 12，可配合 Bootstrap 5.3+ 新增的$grid-order-max: 12;（需在variables导入前定义）
为什么不能直接设 $grid-columns: 5 实现 5 等分
技术上可以编译成功，但实际不可用：.col-md-1 到 .col-md-5 的宽度分别是 20%、40%…100%，而 Bootstrap 默认的 .col-md-6（50%）等类依然存在，混用会导致宽度冲突和不可预测的换行。
更关键的是：
- 响应式断点（
md、lg）下的.col-md-5和.col-lg-5仍依赖同一套 5 列计算，无法像 12 列那样灵活支持 1/3、1/4、1/6 等常用比例 - 所有
offset-、push-、pull-类都会变成 20% 步进，偏移控制粒度变粗 - 社区生态（插件、模板、文档）默认按 12 列设计，强行切 5 列会失去兼容性
真要 5 等分，用 .col-md-5ths 手动类或原生 display: grid 更可控。
24 列的实际宽度计算与 gutter 兼容性
24 列本身不改变 gutter 行为，但会影响其视觉占比。例如默认 $grid-gutter-width: 1.5rem 是固定值，但在 24 列体系中，每列平均宽度变小，gutter 占比相对上升——尤其在小屏下容易显得间隙过大。
建议同步调整：
- 降低
$grid-gutter-width（如设为1rem），或用$grid-gutter-widths按断点细分 - 确认
.row仍使用margin-left: -$grid-gutter-width / 2，否则首尾列的 margin 可能错位 - 24 列的
.col-1宽度是100% / 24 = 4.166666667%，CSS 中会保留足够精度，但旧版 IE 可能四舍五入失真，生产环境建议测试
真正麻烦的不是“怎么设成 24”，而是“设完之后哪些地方会悄悄变掉”——尤其是团队协作时，没人会特意去翻 variables.scss 看列数变了没。
