Bootstrap 5 的 col- 类不支持百分比宽度，需用 flex: 0 0 X% 覆盖默认 flex 值以实现精确比例，如 30%/70%，同时保留栅格内边距和响应式断点能力。
Bootstrap 5 的 col- 类不支持直接写百分比宽度
Bootstrap 5 默认的栅格系统基于 12 列等分，col-6 是 50%，col-8 是 66.666% —— 但你没法写 col-7.5 或 col-45p。想实现「左侧 30%、右侧 70%」这种非 12 整除比例，不能靠原生 col- 类硬凑。
常见错误是强行用 col-4 + col-8（33.3% + 66.6%）冒充 30%/70%，结果在小屏下错位或留白异常。
- 优先用
flex+width：对容器加class="d-flex"，子项用style="width: 30%"和style="width: 70%" - 或者用
col+flex-grow-0+ 内联style：保留栅格语义，避免破坏响应式断点逻辑 - 别给子项加
col同时又设width——col会注入flex: 0 0 auto，和自定义 width 冲突
用 col 配合 style="flex: 0 0 X%" 最稳妥
这是兼顾 Bootstrap 响应式结构和精确宽度控制的做法。关键在覆盖默认 flex 值，而不是只写 width。
<div class="row"> <div class="col" style="flex: 0 0 30%">左侧内容</div> <div class="col" style="flex: 0 0 70%">右侧内容</div> </div>
-
flex: 0 0 X%表示不伸缩、不收缩、基准宽度为 X%，完全绕过 Bootstrap 的 12 列计算 - 保留
col类能继承padding-left/right: .75rem等栅格内边距，避免手动补样式 - 在
sm及以上断点仍可叠加col-sm-*，比如col-sm-4+style="flex: 0 0 30%"，小屏时按 4/8 切分，中屏起切为 30/70
警惕 col-auto + width 导致的换行
col-auto 会让元素宽度由内容撑开，此时再加 style="width: 30%" 容易触发 flex 换行（尤其在窄屏），因为 col-auto 默认含 flex-shrink: 1。
- 如果必须用
col-auto，得显式加flex-shrink-0类 - 更推荐统一用
col+flex: 0 0 X%，行为更可预测 - 检查 DevTools 中该元素的 computed
flex-basis是否真为 X%，不是auto或0px
响应式场景下慎用纯 CSS Grid 替代
有人会想直接弃用 Bootstrap 栅格，改用 display: grid + grid-template-columns: 30% 70%。这在静态布局里可行，但会丢失 Bootstrap 的断点类（如 col-md-6）、间距工具（pe-3）、自动间隙（g-3）等能力。
- 若项目已重度依赖 Bootstrap 工具类，混用 CSS Grid 容易导致 margin/padding 冲突
- 移动端适配时，Grid 的
@media规则需手写，而col-sm-*+flex组合天然支持断点切换 - 真要用 Grid，请确保父容器移除所有
row、col类，并重置 Bootstrap 的栅格相关 CSS 变量（如--bs-gutter-x）
实际项目里，最常被忽略的是 flex 值的三个参数顺序和含义——很多人只写 flex: 30%，其实那只是 flex-grow，根本不会生效。必须写全 flex: 0 0 30%。
