Bootstrap的col-{n}类宽度按n/12计算，如col-3为25%、col-4为33.33%，col-5不存在因12不能被5整除；混用时按断点从小到大覆盖生效。
Bootstrap 的 col 类名不是“写多少就占多少百分比”，而是基于 12 列栅格的计算结果；直接套 col-5 不会得到 41.666% 宽度，因为根本不存在这个类。
col-1 到 col-12 的宽度怎么算出来的
所有 col-{n}（n 为 1–12）类的宽度都按 width: calc(8.333333% * n) 计算，前提是父容器是 row、且所有同级 col 的数字加起来等于 12。比如：
-
col-3→width: 25%（3/12） -
col-4→width: 33.333333%（4/12） -
col-5→ 不存在，Bootstrap 5 没提供该类
这不是遗漏，而是设计选择：12 能被 1、2、3、4、6 整除，覆盖了绝大多数布局需求。硬凑出 5 栏或 7 栏，必须自己加 CSS。
col 和 col-* 混用时的断点优先级规则
当一个元素同时写了多个断点类，比如 col-6 col-md-4 col-lg-3，浏览器按「从小到大」顺序覆盖生效，但只在对应断点及以上起作用：
-
col-6：从 xs（，手机竖屏占半宽 -
col-md-4：≥768px 才启用，覆盖col-6，变成三等分 -
col-lg-3：≥992px 再覆盖，变成四等分
漏掉 col- 基础类，小屏就会退化成 display: block，列堆成一竖条——这不是 bug，是移动优先逻辑的必然表现。
col-auto 和 col 在同一行里怎么共存
col-auto 不参与 12 列均分，它根据内容宽度自适应，而其他 col 类仍按比例分配剩余空间。典型场景是表单中「标签 + 输入框」组合：
<div class="row"> <div class="col-auto">用户名：</div> <div class="col"><input type="text" class="form-control"></div> </div>
这里 col-auto 包裹文字，宽度刚好够用；col（无后缀）自动占满剩余空间。注意：col 单独存在时才触发“等分”，如果同行还有 col-6 和 col-auto，col 就只分剩下的空间，不是整行均分。
为什么 col-4 在某些设备上看起来不等于 33.333%
视觉偏差往往和以下三点有关：
-
row默认有gap（Bootstrap 5+），比如g-3会在列之间加 1rem 间隙，实际内容区变窄 -
col内部内容溢出（如长单词、未设min-width: 0的 flex 子项），导致列被撑开或收缩 - 字体渲染、box-sizing 或 padding/margin 混用，让视觉占比失真
真要验证宽度是否准确，别靠肉眼，用浏览器开发者工具检查 computed width；想彻底对齐视觉，优先加 g-0 清除间隙，再确保内容容器设 min-width: 0 防止 flex 项目不收缩。
