不能直接改$grid-columns就完事，因为Bootstrap 5的.col-*类由Sass循环生成，未编译前不存在；必须重定义$grid-columns并重新编译Sass源码才能生成完整24列类。
为什么不能直接改 $grid-columns 就完事？
Bootstrap 5 的栅格系统依赖预编译的 Sass 变量和配套的 mixin（比如 make-col-ready、make-col），单纯在 CSS 中覆盖类名或重写 .col-* 规则无效——因为这些类根本没生成。你看到的 .col-6、.col-md-4 是 Sass 循环输出的，源码里没有手写的 24 列类。
所以，想用 24 列，必须从构建源头介入，而不是后期用 CSS 覆盖。
正确做法：重定义 $grid-columns 并重新编译 Sass
Bootstrap 官方支持自定义列数，前提是使用 Sass 源码（不是 bootstrap.min.css）。你需要：
- 安装 Node.js 和 Sass 编译器（如
sassCLI 或通过 Webpack/PostCSS 插件） - 导入 Bootstrap 的源文件（
node_modules/bootstrap/scss/bootstrap.scss） - 在导入前，先覆盖变量：
$grid-columns: 24;
- 确保同时调整断点对应的列生成逻辑（默认所有断点共用
$grid-columns，无需额外操作）
编译后，你会得到含 .col-1 到 .col-24、.col-sm-8、.col-lg-12 等完整 24 列类的 CSS。
立即学习“前端免费学习笔记（深入）”；
常见错误：用 CSS 强行“模拟”24列
有人尝试这样写：
.col-xxl-1 { width: 4.1666666667%; }这看似能凑出 24 等分，但会立刻引发问题：
-
.col-6仍按 12 列解释为 50%，和你的新规则冲突 - 响应式断点（
sm/md）类未同步更新，.col-md-6还是占 50%，不是 25% - offset、order、gutter 相关类（如
.offset-2、.g-3）全部失效或错位 - JavaScript 组件（如 Carousel、Offcanvas）内部不读取这些样式，不影响行为，但布局已不可控
替代方案：用 flex + calc() 手写轻量栅格（仅限简单场景）
如果你只是某个局部需要 24 等分，且不想动构建流程，可以绕过 Bootstrap 栅格，用原生 Flex：
<div class="d-flex"> <div class="flex-1" style="flex: 0 0 calc(100% / 24);">1</div> <div class="flex-1" style="flex: 0 0 calc(100% / 24);">2</div> <!-- ... up to 24 --> </div>
注意：
-
flex-1是 Bootstrap 5 的工具类，但仅控制flex: 1，不控制基础尺寸，所以必须加内联style - 响应式需手动写媒体查询，无法复用
col-md-*那套断点逻辑 - 无法与
.row、.g-3等现有栅格工具无缝协作
真正要让整个项目按 24 列运转，重编译 Sass 是唯一可靠路径。漏掉 $grid-gutter-width 或 $grid-breakpoints 的联动调整，后面布局会越来越难对齐。
