应使用 SCSS 编译时注入命名空间或 :where() 降权解决覆盖问题；动态组件需通过 container 选项指定挂载位置以匹配样式作用域。
Bootstrap组件样式被项目全局CSS覆盖怎么办
直接用 .bootstrap 命名空间包裹不解决问题——Bootstrap 5+ 的 CSS 是基于选择器权重和源码顺序生效的，不是靠父级 class 就能隔离。真正起效的方式是编译时注入命名空间，或运行时用 :where() / :is() 降权。
- 别在 HTML 里手动给每个
div加class="bootstrap"，既难维护，又对modal、dropdown等动态插入的 DOM 无效 - Bootstrap 官方 SCSS 变量
$enable-important-utilities和$enable-smooth-scroll无关命名空间，别指望开关它能解决冲突 - 如果你用的是 Bootstrap CDN（非源码），唯一可行路径是用
:where(.my-bootstrap) .btn重写所有关键选择器，但工作量大且易漏
用 SCSS 编译时注入命名空间（推荐）
这是最干净、可维护性最强的方式：修改 Bootstrap 源码导入逻辑，在顶层加一层 wrapper class，并让所有组件选择器自动带上前缀。
- 在自定义 SCSS 入口文件中，用
@use "bootstrap" with { ... }+@layer控制层叠顺序 - 关键一步：把 Bootstrap 的全部 CSS 包进一个
:where(.my-bs) {}块里，例如：@layer bootstrap {<br> :where(.my-bs) {<br> @forward "bootstrap" with (<br> $body-bg: #fff<br> );<br> }<br>} - 注意
:where()不增加选择器权重，能避免压过你自己的.btn-primary规则；但 Safari 15.4 以下不支持，需确认目标浏览器范围 - 所有 JS 初始化仍照常，
new bootstrap.Modal(...)不受影响，因为命名空间只作用于样式
JS 组件动态插入的 DOM 怎么套命名空间
像 modal、tooltip 这类由 JS 创建并 append 到 document.body 的元素，默认脱离你的命名空间容器，样式就失效。
- 必须在初始化时指定
container选项，例如：new bootstrap.Modal(el, { container: '.my-bs' }) - Tooltip 和 Popover 默认也插到 body，要统一改：
data-container=".my-bs"或 JS 配置container: '.my-bs' - 如果用了多个命名空间（比如管理后台和用户前台混用），不能共用同一个
container，否则互相污染；建议按模块设不同 class，如.admin-bs、.user-bs
为什么直接加 !important 是条死路
看着快，实际会让后续任何样式调整变成“谁写得更狠”的竞赛，尤其当你引入第三方图表库或 UI 组件时，冲突会指数级增长。
- Bootstrap 本身大量使用
!important（比如form-control:focus），你再加一层，等于开启权重军备竞赛 - PostCSS 插件如
postcss-important-comment无法识别你手写的!important注释，自动化降权失败 - DevTools 里看到一堆
color: red !important和color: blue !important并存，说明你已经失去控制权
命名空间不是加个 class 就完事，关键是让「样式作用域」和「DOM 实际挂载位置」对齐——这点在 JS 动态创建内容时最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
