不能靠“一套CSS同时适配v4和v5”，因类名、变量模型、DOM契约完全不同；可行策略仅有按页面/路由分离或按容器隔离（如.bs4-scope作用域限定）。
不能靠“一套CSS同时适配v4和v5”——它们的类名、变量模型、DOM契约完全不同，强行共存只会让样式互相覆盖、JS行为失效。
为什么直接写通用 CSS 会失败
Bootstrap 4 和 5 不是简单升级，而是两套独立系统：v4 用 $spacers list + jQuery + .form-group 结构契约；v5 用 CSS 变量 + --bs-gutter-x + 移除 .form-group + data-bs-* 属性。你写一个 .btn 规则，v4 依赖 border-radius: $border-radius，v5 却读 border-radius: var(--bs-border-radius)，两者不联动。
常见错误现象：
- 同一页面引入 v4 和 v5 的 CSS，
.card圆角忽大忽小，.invalid-feedback在 v5 下完全不显示 - 用
[class*="btn"]统一设颜色，结果 v5 的.btn-outline-white被 v4 的.btn-outline-light规则覆盖错乱 - 自定义
:root { --bs-primary: #0d6efd; }，但 v4 完全不识别该变量，毫无效果
真正可行的兼容策略只有两种
不是“写兼容CSS”，而是控制加载路径或 DOM 层级，让两套系统物理隔离：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
按页面/路由分离：旧模块走
/legacy/路径，强制加载 Bootstrap 4 CSS + JS；新模块走/app/，加载 v5。用 HTTP header 或构建时条件打包，避免同页混入 -
按容器隔离（推荐）：给 v4 区域加包裹类
<div class="bs4-scope">...</div>，然后在自定义 CSS 中限定作用域：.bs4-scope .btn { border-radius: 0.25rem !important; }<br>.bs4-scope .form-group { margin-bottom: 1rem; }同时确保 v4 的 JS 初始化只作用于.bs4-scope内部 - 禁用 v5 的自动初始化：在 v4 区域内移除所有
data-bs-*属性，防止 v5 的bootstrap.js错误绑定事件
哪些“看似兼容”的写法实际危险
这些做法短期看似有效，上线后必出问题：
- 用
[data-toggle], [data-bs-toggle]同时匹配两种 data 属性——v4 的$.fn.modal和 v5 的Modal构造函数冲突，点击一次弹两次框 - 重写
.col的flex行为来“统一宽度”——v4 的 float 布局和 v5 的 flex 布局无法用同一套 CSS 修复，display: block会让 v5 的.row高度塌陷 - 把 v4 的
_variables.scss复制进 v5 项目试图“复用变量”——v5 的$spacers是 map，v4 是 list，Sass 编译直接报错 - 在 HTML 中同时写
class="btn btn-primary"和data-toggle="tooltip"——v5 的 Tooltip 初始化会找data-bs-toggle，找不到就静默失败，但 v4 的 tooltip 仍可能因 jQuery 事件残留触发异常
最易被忽略的点：v5 的 CSS 变量（如 --bs-emphasis-color）是动态可变的，而 v4 所有值都是编译期静态。如果你在运行时用 JS 修改 :root 变量，只会影响 v5 组件，v4 区域完全无响应——这种“半生效”状态极难调试。
