如何在Bootstrap中用CSS将默认12列栅格扩展为24列系统-css教程-PHP中文网

不能直接改$grid-columns就完事，因为bootstrap 5的.col-*类由sass循环生成，未编译前不存在；必须重定义$grid-columns并重新编译sass源码才能生成完整24列类。

如何在bootstrap中用css将默认12列栅格扩展为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 编译器（如 sass CLI 或通过 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列

有人尝试这样写：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.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>

注意：