如何无冲突同时使用Bootstrap 3.3与5.2并保留原有3.3代码

直接全局同时加载两个版本的Bootstrap是100%会出冲突的，本质和Bootstrap3、4无法共存的原因完全一致：两个版本都包含全局样式重置、大量同名通用类（比如.container、.row、.btn、.col-*）、同名组件逻辑，全局引入后必然出现样式互相覆盖、JS组件事件冲突，直接破坏原有站点功能。

但不需要全量重构老代码库，完全有可行方案实现无冲突共存，适配管理层不批准全量重构的前提：

• 首选方案：编译阶段给Bootstrap 5.2加命名空间隔离
  这是成本最低、稳定性最高的方案，原有BS3.3的代码一行都不用改。操作逻辑很明确：
  1. 拿到Bootstrap 5.2的SCSS源码，修改编译入口，把所有Bootstrap 5的样式规则全部包裹在自定义命名空间选择器下，比如外层统一加.bs5父选择器，编译后原本的BS5类选择器都会变成.bs5 .container、.bs5 .btn这类带前缀的规则，只会在加了class="bs5"的容器内部生效。注意要把BS5自带的reboot全局重置样式也严格限制在.bs5容器内，不要让它输出全局的*、body标签选择器规则，避免影响外层BS3页面。
  2. JS部分做对应隔离：Bootstrap 5已经不依赖jQuery，不要开启全局自动初始化，改成手动只在.bs5容器范围内初始化你需要的BS5组件，避免和BS3的jQuery版组件（比如弹窗、提示框）抢DOM事件绑定。
     这套方案落地后，老页面完全跑原有BS3逻辑不受任何影响，新开发的功能模块只要在外层套一层<div class="bs5">容器，内部就可以随便用BS5.2的所有新特性，两边样式、JS完全不打架。
• 低门槛替代方案：用沙箱隔离新模块
  如果不想折腾SCSS编译配置，可以直接把所有用到BS5.2特性的新功能做成独立页面，用iframe嵌入老站点，或者用微前端沙箱做样式、JS的完全隔离。老页面继续加载原有BS3资源，新模块独立加载BS5资源，完全没有冲突风险，唯一的额外工作是处理老页面和嵌入模块之间的通信逻辑。
• 必须避开的坑
  • 绝对不要直接在全局同时引入两个版本的原生CSS和JS，就算调整引入顺序也没用，同名类的样式会互相覆盖，JS组件的事件、全局对象会冲突，必然导致老页面功能异常。
  • 不要依赖网上零散的第三方共存脚本做自动冲突处理，这类脚本大多只覆盖了部分常用类名的替换，漏了状态类、重置样式、事件绑定的冲突点，出问题排查成本极高。
  • 如果只需要BS5的某几个特定功能（比如Offcanvas侧边栏、新增的表单控件样式），不需要引入整个BS5包，单独把对应模块的SCSS摘出来加命名空间编译即可，还能减少资源体积。

内容的提问来源于stack exchange，提问作者anjanesh