Bootstrap 5的.row强制flex布局，.col-*语义变为全局生效，混用float会导致高度塌陷、列宽异常和间距翻倍；需用.legacy-grid隔离重置，显式清除浮动并禁用gutter变量。
Bootstrap 4 升级到 v5 后，网格系统不是“出错了”，而是底层布局模型切换了——.row 从可选 flex 变成强制 flex，.col-* 语义也变了。直接套用旧 HTML 结构会塌陷、错位、间距翻倍，这不是样式覆盖问题，是模型打架。
为什么 .row 高度塌陷或列宽异常
旧项目常用 float: left + width: 33.333% 模拟三栏，而 v5 的 .row 是 display: flex 容器，.col 是 flex item。两者混用时：
- 浮动子项脱离文档流，
.row高度塌陷（DevTools 查看 computeddisplay值，若为flex但子项有float，就是冲突） -
.col的flex: 1无法作用于浮动元素，列宽计算失效 - 旧 CSS 中的
margin-right: -15px和 v5 的--bs-gutter-x叠加，导致列间距翻倍
如何保留旧 HTML 结构但让 .col 正常工作
不重写模板时，用 CSS 层级隔离 + 显式重置：
- 给旧区块加包裹类：
<div class="legacy-grid">...</div> - 在自定义 SCSS 或 style 标签中重置：
.legacy-grid { display: block; } .legacy-grid::after { content: ""; display: table; clear: both; } .legacy-grid [class*="col-"] { float: none; width: auto; flex: 0 0 auto; } .legacy-grid .row { --bs-gutter-x: 0; --bs-gutter-y: 0; } - 若旧布局依赖
inline-block，补一句：.legacy-grid * { vertical-align: top; }
为什么 .g-3 看起来没生效
v5 的 .g-3 默认同时控制水平和垂直间隙，但实际渲染受 flex 容器行为影响：
- 父容器有
overflow: hidden或position: absolute子项，会破坏 flex 拉伸逻辑 - 图片未设
max-width: 100%，撑破列宽，间隙被“挤掉” -
.col必须直接放在.row内，不能嵌套在.container下再丢进去 - 只需水平间隙？改用
.gx-3；只需垂直？用.gy-2；.g-0是唯一有效关闭间隙的方式，.no-gutters已废弃
如何让 .row-cols-* 在小屏下仍保持多列
v5 的 .row-cols-* 类不再全局生效，而是严格按断点链触发：
-
.row-cols-2在 xs 下退化为单列（v4 行为），必须显式补全断点链：.row-cols-1 .row-cols-sm-2 .row-cols-md-3 - 漏掉
.row-cols-1会导致 xs 下.col按内容宽度撑开，不是满宽 - 验证方法：Chrome DevTools 切到 “iPhone SE” 尺寸，确认是否仍双列
最易被忽略的是 .row 的 display 类型和子项的参与状态——只要 DevTools 里看到 .row 是 flex 但子项还挂着 float，就说明没真正切换过去，所有后续调整都只是打补丁。
