不能通过纯CSS安全修改Bootstrap 5的栅格列数，因.col-*类由Sass编译时静态生成，运行时CSS无法新增未定义类名；可靠方案是改Sass变量$grid-columns并完整导入模块链，或直接使用CSS Grid。
不能通过纯CSS安全修改Bootstrap 5的栅格列数。所有.col-*类（如col-6、col-md-3）是Sass在编译时静态生成的，CSS运行时无法新增或覆盖这些类名本身。试图用:not(.col-13) { display: none }或.col-13 { width: 8.333333% }这类写法，既不生效也不可靠——浏览器根本不会识别未定义的col-13类，也不会执行你“以为”的计算逻辑。
为什么直接写CSS改列数会失效
Bootstrap 5 的col-*系列类名不是靠 JS 动态注入，也不是 CSS 变量控制的；它们由bootstrap/scss/grid.scss里的@each循环，根据$grid-columns值（默认12）硬编码生成。输出 CSS 里只有.col-1到.col-12及其响应式变体。你写的.col-10 { width: 10% }永远不会匹配任何 HTML 元素，因为 HTML 中的class="col-10"在 DOM 里不存在——它不是 Bootstrap 输出的一部分。
- 检查浏览器 DevTools 的 Elements 面板，搜索
col-10：如果没出现，说明这个类压根没被编译进 CSS - 即使你手写
class="col-10"在 HTML 里，也只会被当作一个无样式的普通 class，不会触发任何栅格行为 - 用
!important强行覆盖.col-6的宽度？那只是改了「已有类」的表现，不是「新增列数」
真正能用 CSS 达成类似效果的替代方案
如果你无法介入 Sass 编译流程（比如只用 CDN 的 bootstrap.min.css），又需要非12列的等宽布局，可行做法是绕过col-*，用纯 CSS 定义一组新类，复用 Bootstrap 的断点媒体查询机制：
- 写
.col-md-5ths { flex: 0 0 auto; width: 20%; }，再加@media (min-width: 768px) { .col-md-5ths { width: 20%; } } - 必须加
flex: 0 0 auto，否则在.row（display: flex）里width会被忽略 - 首列要重置
margin-left: 0，否则默认 gutter 会让整体左偏 - 别指望
offset-或order-自动适配——它们仍绑定在 12 列系统，得自己写.offset-md-40 { margin-left: 40% }这类类
什么时候该放弃CSS，转用Sass或CSS Grid
当你要的不是「偶尔几个5列布局」，而是全站统一用 10 列或 24 列，并依赖offset-、gutter、响应式类协同工作时，CSS 层面已无解。此时必须走 Sass 路线：$grid-columns: 24必须在@import "bootstrap/scss/variables"之前声明，且完整导入functions→variables→mixins→grid模块链。漏掉grid.scss，就等于没生成新类。
更现代的出路是直接用原生 CSS Grid：display: grid; grid-template-columns: repeat(5, 1fr)。它不依赖 Bootstrap 的列数设定，也不受row/col语义束缚，兼容性在 2026 年已足够（Chrome 66+、Firefox 63+、Safari 16.4+）。唯一要注意的是：别把.col-6塞进.grid容器——Flex 和 Grid 子项规则互不兼容。
最容易被忽略的一点：所谓「安全修改」，本质是承认 Bootstrap 栅格的列数不是运行时配置项，而是编译期契约。你改的不是样式，是生成样式的规则本身。想绕过这层，就得换引擎，而不是修轮胎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
