bootstrap 5 默认移除ie支持、废弃.float回退、改用css变量控制栅格，旧css若依赖float/inline-block/手动负边距会与.flex布局冲突，导致塌陷、间距翻倍、响应式失效。
Bootstrap 5 默认移除了对 IE 的支持、废弃了 .row 的 display: flex 回退逻辑，并改用 CSS Custom Properties 控制栅格行为；如果你的旧 CSS 依赖 float、inline-block 或手动负边距，它大概率会和 Bootstrap 5 的 .row/.col 行为冲突——这不是“样式覆盖”，而是布局模型根本不同。
为什么旧 CSS 在 Bootstrap 5 下突然错位
旧布局常靠 float: left + width: 33.333% 模拟三栏，而 Bootstrap 5 的 .row 是 display: flex 容器，.col 是 flex item。两者混用时：
• 浮动元素脱离文档流，.row 高度塌陷
• .col 的 flex: 1 会尝试撑满剩余空间，但浮动子项不参与 flex 计算
• 旧 CSS 中的 margin-right: -15px 和 Bootstrap 的 --bs-gutter-x 叠加，导致列间距翻倍
- 检查 DevTools 中
.row的 computeddisplay值：如果是flex，但子元素有float，说明模型打架 - 旧项目若用过
clearfix类，现在可能多余——Bootstrap 5 的.row自带overflow: hidden清浮动能力（仅限 flex 场景） - 不要试图用
!important强行恢复 float 行为，这会让响应式断点（如.col-md-6）彻底失效
保留旧布局结构但兼容 Bootstrap 5 栅格
如果你不能重写 HTML 结构（比如 CMS 输出固定），可用 Sass 层级隔离 + 规则重置：
- 在自定义 SCSS 中，用
.legacy-grid包裹旧区块：.legacy-grid { display: block; } .legacy-grid::after { content: ""; display: table; clear: both; } - 显式重置 Bootstrap 对该区域的影响：
.legacy-grid [class*="col-"] { float: none; width: auto; flex: 0 0 auto; } - 禁用 Bootstrap 的 gutter 注入：
.legacy-grid .row { --bs-gutter-x: 0; --bs-gutter-y: 0; }，避免和旧 padding/margin 冲突 - 如果旧布局依赖
inline-block，补一句.legacy-grid * { vertical-align: top; }防止基线错位
启用 Bootstrap 5.2+ 的 CSS Grid 替代方案（推荐新项目）
Bootstrap 5.2 起提供原生 .grid + .g-col-*，它绕过 flex，直接走 display: grid，更适合替代老式 float 布局：
- 必须先启用：
$enable-cssgrid: true，且要在@import "bootstrap/scss/functions"之前声明 -
.g-col-*不依赖父容器是.row，可直接放在任意块级容器里，天然避开 float/flex 混合问题 - 注意：CDN 上的
bootstrap.min.css默认未启用 Grid，必须自己编译 SCSS，否则.g-col-4会被忽略、整行占满宽度 - 响应式写法更干净：
.g-col-12 .g-col-md-6 .g-col-xl-4，无需.row中转，也无负 margin 干扰
最易被忽略的兼容点：CSS Custom Properties 作用域
Bootstrap 5 用 --bs-gutter-x、--bs-breakpoint-md 等变量驱动响应式，但这些变量是全局的。如果你的旧 CSS 也用了同名变量（比如 --gutter），或通过 JS 动态 setProperty 修改过，会导致栅格计算异常——例如 .col-md-6 在 768px 死活不触发。
查证方式：在 DevTools 的 Styles 面板里选中一个 .col 元素，展开 :root，看 --bs-breakpoint-md 是否仍是 768px。如果不是，说明有其他脚本或 CSS 覆盖了它——这类问题不会报错，但布局会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
