bootstrap 5 不支持直接写百分比类名（如 col-33p），因其栅格基于12列系统，应使用内置列数映射（如 col-4 + col-8 实现33.3%/66.7%）或 .col 自动均分，避免破坏响应式逻辑与语义一致性。
不能直接用类名写百分比，但有等效且更可靠的替代方案。 Bootstrap 5 的 .col-* 类基于 12 列系统，数字对应占几份（如 .col-3 = 3/12 = 25%），不支持 .col-33p 或 .col-66% 这类写法。强行用自定义 CSS 覆盖宽度会破坏响应式断点行为，得不偿失。
为什么不用自定义百分比类？
Bootstrap 的断点类（如 .col-sm-4）是预编译的 CSS 规则，每个都绑定具体媒体查询和 flex-basis 值。如果你自己加 .col-33p { flex-basis: 33.333%; }：
- 它只在默认断点（
xs）生效，sm、md等断点需重复写六套，维护成本爆炸 - 和原生
.col-sm-4冲突时，CSS 优先级难控制，容易出现“写了却没生效” - 破坏了 Bootstrap 的语义一致性：别人读代码时认不出
.col-33p是干啥的，而.col-sm-4一眼知道是“小屏起占 4 列”
真正实用的等效写法
要实现 33.3% / 66.6% 这类比例，直接用系统内置的列数映射即可：
-
.col-4+.col-8→ 4/12 = 33.333%，8/12 = 66.666% -
.col-sm-4+.col-sm-8→ 小屏及以上才生效，超小屏自动堆叠 -
.col-md-3+.col-md-9→ 中屏起 25% / 75%，比写25%更稳定 - 如果列数不确定，用
.col自动均分：三个.col就是各占 ~33.3%，四个就是各占 25%
扩展栅格系统的常见做法与风险
有人会改 Sass 变量（如 $grid-columns: 24）来获得更细粒度，比如 .col-8 表示 8/24 = 33.3% —— 这可行，但要注意：
- 所有依赖 12 列的工具类（如
.offset-3、.g-3间距）不会自动适配，得同步重写 - 第三方组件（如日期选择器弹层、模态框内部栅格）可能错位，因它们硬编码了 12 列逻辑
- 升级 Bootstrap 版本时，自定义网格配置容易被覆盖，每次都要手动合并
- 团队协作中，新人看到
.col-8会默认以为是“8/12”，造成理解偏差
最常被忽略的一点：Bootstrap 的栅格本质是 flex 容器 + 预设 flex-basis，它不处理内容溢出或高度塌陷。比如图片没设 max-width: 100%，或者子元素用了 position: absolute，.col 的宽度计算就会失效——这时候调百分比毫无意义，先修内容渲染问题。
