12是1、2、3、4、6的最小公倍数，能 cleanly 支持网页最常用等分布局，兼顾实用性与复杂度；改列数虽可行但会增加体积、破坏兼容性与协作效率。
12是1、2、3、4、6的最小公倍数
Bootstrap选12列，不是拍脑袋定的，而是数学上最实用的折中解。12能被1、2、3、4、6整除，意味着一行能干净地分成等宽的1列、2列（各占6份）、3列（各占4份）、4列（各占3份）、6列（各占2份）——这些正是网页中最常出现的布局模式。
如果硬要支持5列均分，最小公倍数就得跳到60，那.col-60-1这种类名既难记又冗余，CSS体积和维护成本都会明显上升。
12列在响应式断点中依然保持可组合性
Bootstrap的xs/sm/md/lg/xl断点各自独立定义列宽，但底层都基于12份划分。比如col-md-8在中屏占8/12（即2/3），col-lg-9在大屏占9/12（即3/4），这种比例缩放天然兼容，不需要额外做归一化计算。
常见错误是试图用col-5或col-7强行凑数，结果发现：
- 类名不存在（Bootstrap没提供）
- 手动写width: 41.666%会破坏栅格的间隙（gutter）逻辑
- 媒体查询切换时比例错乱，尤其在flex-wrap触发换行时
12列不等于“只能12列”，但改它有代价
你可以通过修改Sass变量$grid-columns重定义列数，比如设为24列来支持更细粒度的控制（如需要1/5宽度时用col-24-5≈20%）。但要注意：
- 所有预置类名（col-*、offset-*、order-*）都会重新生成，打包体积略增
- 第三方组件或插件可能隐式依赖12列假设（比如某些轮播图的导航对齐逻辑）
- 设计稿若按8px基准网格走，24列反而更容易对齐；但若团队习惯用Figma的12列布局模板，改了反而增加协作成本
为什么不是16列或24列？
16列确实被部分设计系统采用（如IBM Carbon），但它无法被3整除，三等分布局得靠col-16-5+col-16-6+col-16-5这种非对称方案，语义弱、难维护。24列虽灵活，但：
- 默认生成的CSS规则数量翻倍（12→24，类名组合爆炸）
- col-24-1这种窄列在小屏上容易触发内容溢出，而Bootstrap默认的min-width: 0和word-break策略是按12列测试过的
- 大多数设备视口宽度（尤其是移动端）用12列做百分比计算，数值更友好（例如col-6 = 50%，col-4 ≈ 33.33%）
真正关键的不是“为什么是12”，而是理解它背后的设计约束：既要覆盖主流布局需求，又要控制实现复杂度和生态兼容性。一旦项目里出现大量col-*叠加ms-auto或me-auto来微调位置，就该想想是不是栅格抽象层已经不够用了——这时候与其改列数，不如直接切到display: grid或flex手动控场。
