直接加 .bootstrap-iso 容器类无效，是因为 Bootstrap 原生 CSS 未将其选择器（如 .btn、.container）包裹在该命名空间内；真正生效需通过 @layer + :where() 在编译时注入命名空间，使所有样式自动带前缀，且 JS 组件（如 Modal、Tooltip）必须显式指定 container: '.my-bs' 才能纳入作用域。
为什么直接加 .bootstrap-iso 容器类没用
你给 <div class="bootstrap-iso"> 包住所有 HTML，但按钮还是没圆角、.container 还是撑满全屏——这不是样式没加载，而是 Bootstrap 的原始 CSS 文件里压根没有 .bootstrap-iso .btn 这种选择器。它只写了 .btn，浏览器照单全收，完全不认你这个父容器。
常见错误是以为“加个 class 就隔离”，结果只是挂了个空壳；真正起效的前提是：所有 Bootstrap 选择器（包括 .row、.dropdown-menu、.modal）都必须在编译时被包裹进命名空间作用域。
- 用
@import "bootstrap"套在.bootstrap-iso { }里？不行——@import已废弃，且会导致变量失效、媒体查询错位 - 手动重写所有
.btn为.bootstrap-iso .btn？维护成本爆炸，且漏掉伪类（如.btn:hover）就失效 - 指望
!important或调整<link>顺序？只能临时压住一两个属性，Modal、Tooltip 等 JS 动态插入的 DOM 依然脱离作用域
用 @layer + :where() 编译时注入命名空间
这是目前最干净、可维护性最强的方式，核心就两行 SCSS：
@layer bootstrap {
:where(.my-bs) {
@forward "bootstrap" with (
$body-bg: #fff,
$primary: #0d6efd
);
}
}:where() 不增加选择器权重，你的 .btn-primary 规则不会被压垮；@layer 确保整套 Bootstrap CSS 被归入同一层叠上下文，避免和自定义样式乱序。
立即学习“前端免费学习笔记（深入）”；
- 静态 HTML 只需包在
<div class="my-bs">内，样式立即生效 - 所有栅格（
.col-md-6）、工具类（.text-center）、表单控件全部自动带上前缀，无需改业务代码 - Safari 15.4+ 支持；若需兼容旧版 Safari，可降级为
.my-bs &嵌套（但会轻微提权）
Modal、Tooltip 等 JS 组件为啥样式失效
它们默认 append 到 document.body，直接跳出 .my-bs 容器，CSS 选择器匹配失败——不是 JS 报错，而是静默失效：点击没反应、弹窗没样式、下拉菜单不出现。
必须显式指定挂载容器，否则命名空间形同虚设：
new bootstrap.Modal(el, { container: '.my-bs' })new bootstrap.Tooltip(el, { container: '.my-bs' })- HTML 中用
data-bs-container=".my-bs"替代默认的data-bs-container="body" - 多个命名空间共存时（如后台/前台分离），
container必须严格对应，比如'.admin-bs'和'.user-bs'不能混用
CDN 场景下唯一可行的补救方式
如果你无法修改构建流程、只能用 Bootstrap CDN，那就别碰编译方案——@use、@layer 全部失效。此时唯一路径是手写降权选择器，逐个覆盖关键组件：
:where(.my-bs) .btn,
:where(.my-bs) .alert,
:where(.my-bs) .modal-content {
/* 你的重写规则 */
}注意：:where() 必须前置，否则权重无效；所有带状态的选择器（.btn:hover、.alert.show）都要单独列出来；.dropdown-menu、.offcanvas 等动态组件同样要补全。
这活儿容易漏、难验证，上线前务必检查 Computed Styles 面板里每条规则是否真生效——尤其别忘了 data-bs-* 属性选择器（如 [data-bs-toggle="modal"]）也得加前缀。
真正麻烦的从来不是写几行 CSS，而是 Modal 插入后脱离容器、Tooltip 找不到定位锚点、或是响应式断点因父容器缺失而失效——这些细节不显眼，但一出问题就全崩。
