Bootstrap 的 col-3 与 col-7 总和为 9/12（75%），非 100% 因栅格基于 12 列整数划分；需用 col + inline style（如 flex: 0 0 30%）或 CSS Grid 实现任意比例。
Bootstrap 的 col-3 和 col-7 加起来只有 9/12，不是 100%，直接写会留白或换行——这不是你写错了，是栅格系统设计如此。
为什么 col-3 + col-7 不等于 3:7？
Bootstrap 的 col-* 类名基于 12 列整数划分：col-3 = 25%，col-7 ≈ 58.33%，总和为 75%。剩余 25% 空间默认由 flex 布局处理：可能留白，也可能触发换行（尤其当父 .row 有 g-* 间距时）。
- 这不是“比例不准”，而是前提限制：所有
col-*数值之和必须为 12 才能填满一行 - 想实现任意比例（如 30%/70%、35%/65%），必须跳出
col-*的整数约束 -
col-3 col-9是 25%/75%，不是 30%/70%；别用它凑数
用 col + inline style 最快落地
不改 CSS、不加自定义类、兼容 Bootstrap 5.0+ 的轻量解法：用 col（无数字后缀）配合内联 flex 声明，显式控制基础宽度。
- 左侧写
<div class="col" style="flex: 0 0 30%;">，右侧写<div class="col" style="flex: 0 0 70%;"> -
flex: 0 0 30%表示不伸缩、不收缩、基准宽 30%，比w-30更可靠（后者是width: 30%，在大屏下可能过宽） - 禁止在同一
.row中混用col-3和style="flex:"，否则 flex 计算冲突，列宽错乱 - 响应式场景下，小屏建议切回
col-12堆叠，中屏起再启用flex: 0 0 30%
用 CSS Grid 更干净（适合简单两栏）
如果布局只是左右两块内容、无嵌套栅格需求，且不需要 Bootstrap 断点自动降级逻辑，CSS Grid 是更直接的方案。
- 父容器加
display: grid; grid-template-columns: 3fr 7fr;，天然支持非 12 整除比例 - 无需
.row、.col，避免栅格层级干扰 - 注意：Grid 不继承 Bootstrap 的断点工具类，需手动写媒体查询控制小屏堆叠
- 若主内容区需用到
col-md-8这类类名，就别强上 Grid——系统混用反而难维护
别踩这些坑
实际项目里最容易翻车的地方不在写法，而在上下文干扰：
-
.row外层被overflow: hidden包裹，align-items: stretch失效，等高都保不住，更别说精准比例 - 给某列加了
min-height: 400px，结果另一列被强行拉高，视觉比例全乱 - 移动端用
col-sm-12 col-md-3 col-md-7——col-md-3是固定 25%，不是 30%，比例彻底跑偏 - 侧边栏用了
position: sticky，但没配max-height和overflow-y: auto，滚动时把整个页面顶下去
真正难的不是写对一行 flex: 0 0 30%，而是确认它没被外层容器、媒体查询、或某个 !important 规则悄悄覆盖掉。
