Bootstrap 5 的 col-3 和 col-7 不能直接搭配使用，因为二者相加仅占9/12=75%，无法填满一行，会导致留白或换行；正确做法是用 col 配合 flex-basis-25/75、内联 style="flex:0 0 30%" 或 CSS Grid 的 3fr/7fr 实现精准比例。
为什么不能直接用 col-3 和 col-7
bootstrap 5 的 col- 类名是基于 12 列栅格的整数划分，col-3 表示占 3/12 = 25%，col-7 表示占 7/12 ≈ 58.33%，两者相加为 9/12 = 75%，**不是 100%**。剩下来的 25% 会留白或触发 flex 换行（尤其当父 row 有 g-* 间距时更明显）。这不是“比例错误”，而是设计前提：所有 col-* 的数值必须加起来等于 12 才能填满一行。
正确做法：用 col + flex 工具类手动设宽
最轻量、兼容性好、不改 CSS 的方式是放弃预设列数，改用弹性容器 + 显式宽度控制：
-
col（无数字后缀）本身是 flex: 1，但配合flex-grow-0和w-25/w-75等工具类可精准控制 - 更推荐直接用
col+flex-basis对应工具类：flex-basis-25和flex-basis-75（需 Bootstrap 5.3+；若版本低，用自定义 class 或内联 style） - 实际写法示例（兼容 5.0+）：
<div class="row"> <div class="col" style="flex: 0 0 30%;">左侧（30%）</div> <div class="col" style="flex: 0 0 70%;">右侧（70%）</div> </div>
- 注意：不要混用
col-*和style="flex:..."在同一row，否则 flex 计算冲突导致错位
响应式场景下怎么保持 3:7 比例
纯百分比在小屏下可能过窄（比如 30% 宽度只剩 110px），建议用断点类分层控制：
- 移动端堆叠：
col-12 col-md-3 col-md-7❌ 错误 ——col-md-3是固定 25%，不是 30% - 正确写法（需自定义类或内联）：
<div class="row"> <div class="col" style="flex: 0 0 100%; max-width: 100%;"><!-- 小屏全宽 --></div> <div class="col" style="flex: 0 0 30%; max-width: 30%;"><!-- 中屏起 30% --></div> <div class="col" style="flex: 0 0 70%; max-width: 70%;"><!-- 中屏起 70% --></div> </div>
- 更干净的做法：写一个响应式自定义类，例如
.col-3-7配合媒体查询，避免大量内联 style
替代方案：CSS Grid 更适合非 12 整除比例
如果只是两栏内容、无复杂嵌套，且不需要 Bootstrap 栅格的断点自动降级逻辑，直接用 CSS Grid 更可控：
<div class="d-grid grid-cols-2 gap-3" style="grid-template-columns: 3fr 7fr;"> <div>左侧</div> <div>右侧</div> </div>
- 注意：
d-grid是 Bootstrap 5.3+ 新增工具类；若版本低，用style="display: grid" - Grid 的
3fr 7fr天然表达 3:7，不依赖 12 列假设，也不受row负 margin 干扰 - 缺点：老版 Safari（iOS 15.4 前）对
fr单位支持弱，需 fallback 到minmax(0, 3fr)或百分比
实际项目中，3:7 这种非整除比例极少需要严格像素级对齐，重点在于视觉平衡——与其死磕栅格，不如用 flex + 百分比快速落地，再根据真实设备测试微调。
