bootstrap 4 与 5 的 .d-flex 类名相同但行为不兼容：v4 仅设 display: flex，v5 还联动 --bs-gutter-x 控制间距；混用会导致列间距翻倍、.row 塌陷、.col 宽度异常等全局污染问题。
Bootstrap 4 和 5 的 .d-flex / .flex-* 类名完全重叠，但行为不兼容
类名相同不代表功能一致。Bootstrap 4 的 .d-flex 是 display: flex 静态声明，而 Bootstrap 5 的 .d-flex 还会联动 --bs-gutter-x 变量控制间距；.flex-row 在 v4 中是 flex-direction: row，在 v5 中却可能被栅格系统自动注入 gap 行为。一旦两者 CSS 同时加载，浏览器只认最终解析出的规则——你看到的可能是 v4 的 display + v5 的 gap，结果列间距翻倍、子项错位。
直接混用 v4 和 v5 的弹性类必然导致布局塌陷
常见错误现象包括：.row 高度塌陷（v4 依赖负 margin 清浮动，v5 依赖 flex 自然撑高）、.col 宽度异常（v4 的 width: 33.333% 与 v5 的 flex: 0 0 auto 冲突）、响应式断点失效（.d-md-flex 在 v4 中仅控制 display，在 v5 中还影响 gap 计算）。这些不是“样式没生效”，而是两个模型在 DOM 同一层级上同时作用，互相干扰。
- 检查 DevTools 的
.row元素 computed 样式：如果display是flex，但margin-left是-15px，说明 v4 和 v5 规则都生效了 - 不要试图用
!important强行统一 display 值——这会让.d-none或.flex-wrap等其他类行为不可预测 - 构建工具（如 Webpack/Vite）无法自动隔离版本；即使你在不同页面 import 不同版本，最终打包进
的 CSS 仍会全局污染
唯一可靠解法：彻底移除旧版本，或用命名空间隔离 v4
如果你必须保留部分 v4 弹性类（例如老 CMS 输出的 HTML），不能靠“加载顺序”或“覆盖类名”解决，得从编译源头隔离：
- 用 Sass 将全部 Bootstrap 4 源码包裹进
.bs4-iso { ... }命名空间，重新编译 CSS，所有类变成.bs4-iso .d-flex、.bs4-iso .flex-row - HTML 中对应区块外层加
class="bs4-iso"，确保作用域封闭 - Bootstrap 5 保持默认引入，不加前缀；它和
.bs4-iso区域天然互不干扰 - 注意：CSS Custom Properties（如
--bs-gutter-x）不会被命名空间影响，需单独在:root或.bs4-iso下重定义变量
别碰 !important 来救 v4/v5 混用
开启 !important 对弹性类几乎无效。因为 v4 的 .d-flex 和 v5 的 .d-flex 都是单属性规则，权重相同，!important 只会让后加载者胜出——而这恰恰是你要避免的不可控行为。更麻烦的是，v5 的栅格 JS 组件（如 Offcanvas）内部依赖 .d-flex 的存在来判断容器状态，一旦被 v4 规则覆盖，JS 可能静默失败，控制台也不报错。
真正容易被忽略的点是：哪怕你只在某个组件里 import v4 的 CSS，只要它进入全局样式表，就会影响整个页面的 .d-flex 解析逻辑——这不是局部问题，是全局污染。
