直接加class="bootstrap-scope"无效，因为Bootstrap的全局选择器（如.btn）不识别该类作为作用域前缀，必须通过Sass在编译阶段将所有规则包裹进.bootstrap-scope父选择器，或用:where()降权实现样式隔离。
为什么直接加 class="bootstrap-scope" 没用
因为 Bootstrap 的 bootstrap.min.css 里所有选择器（如 .btn、.container、.row）都是无前缀的全局规则，浏览器不会因为你给某个 <div> 加了 class="bootstrap-scope" 就自动把 .btn 变成 .bootstrap-scope .btn。它压根不认这个“作用域”，照样全局匹配。
常见错误现象：DOM 里写了 <div class="bootstrap-scope"><button class="btn">点我</button></div>，但页面其他地方的 .btn 也变了样式——说明没隔离成功。
- 纯 HTML + CDN 引入方式下，
class="bootstrap-scope"是空挂，毫无约束力 - Vue 的
<style scoped>或 React 的 CSS Modules 对已注入的 Bootstrap CSS 完全无效 - 构建工具（Vite/Webpack）不会重写第三方 CSS 文件里的选择器
用 Sass 套命名空间是最可靠的方式
必须在源码编译阶段，把整个 Bootstrap 的 CSS 规则包裹进一个父选择器中。不是“导入后再加类”，而是“导入时就限定范围”。
在你自己的 custom-bootstrap-scoped.scss 中按顺序写：
立即学习“前端免费学习笔记（深入）”；
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
.bootstrap-scope {
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/utilities";
// ⚠️ 别导入 buttons、cards 等 components，除非你真需要且能处理它们的全局副作用
}
- 容器 class（如
.bootstrap-scope）必须出现在实际 DOM 根节点上：<div class="bootstrap-scope">...</div> - 所有 Bootstrap 类会变成
.bootstrap-scope .btn、.bootstrap-scope .container，天然避开全局污染 - 响应式断点（
@media）不受影响，因为媒体查询不依赖选择器结构
JS 组件（Modal/Tooltip）会失效？得手动指定 container
Bootstrap 的 JS 组件默认把 .modal、.tooltip 插入到 document.body，脱离你的 .bootstrap-scope 容器，导致样式不生效——这不是 bug，是设计如此。
解决方法只有两个：
- 初始化时显式传入
container选项：new bootstrap.Modal(el, { container: '.bootstrap-scope' }) - 用 data 属性触发时，必须确保目标元素在
.bootstrap-scope内，且 JS 能查找到，例如：<div class="bootstrap-scope"><div class="modal">...</div></div>，否则静默失败
注意：data-bs-toggle="modal" 不会自动识别命名空间，它硬编码查找 .modal，所以 DOM 结构和 JS 初始化方式必须对齐。
用 :where() 降权是轻量替代方案（Sass 编译可用）
如果你不想重写全部选择器，又希望自定义样式能轻松覆盖 Bootstrap，默认权重太高是个坑。这时可以用 CSS :where() 在编译时“归零”权重。
在入口 SCSS 中写：
@layer bootstrap {
:where(.bootstrap-scope) {
@forward "bootstrap" with (
$body-bg: #fff
);
}
}
-
:where()不增加 specificity，.bootstrap-scope .btn和原生.btn权重一致，谁后声明谁生效 - Safari 15.4 以下不支持，需兼容旧版时改用
:is(.bootstrap-scope)，但要注意它取子选择器最高权重 - 所有 JS 初始化照常工作，无需修改调用方式
真正麻烦的从来不是怎么写 CSS，而是 JS 动态插入的节点是否还在你的作用域里——这点最容易被忽略，一出问题就去查 DevTools 的 Computed 面板，看那个 .modal 元素到底插在哪了。
