直接加 .my-bs 容器类但样式没变，是因为 bootstrap css 未在编译时注入该命名空间；必须用 @layer bootstrap { :where(.my-bs) { @forward "bootstrap"; } } 在 scss 阶段包裹，并为 modal 等 js 组件显式指定 container: '.my-bs'，否则动态 dom 仍脱离作用域。
直接加 .my-bs 容器类但样式没变？不是 HTML 没包对，而是 Bootstrap 的 CSS 根本没被编译进这个作用域——所有 .btn、.container 还是裸奔在全局，浏览器当然不认你那个父容器。
为什么 .my-bs 包住 HTML 却无效
常见错误是只改 HTML，不动构建流程。Bootstrap 原生 CSS 文件里压根没有 .my-bs .btn 这种选择器，它只写 .btn。你加的 class="my-bs" 就像给房间挂个门牌，但墙还是共用的。
- 手动重写所有选择器（如把
.btn改成.my-bs .btn）维护成本高，且漏掉.btn:hover、.btn:focus就断掉 -
@import "bootstrap"套在.my-bs { }里已废弃，还会导致变量失效、媒体查询错位 - 靠
!important或调整<link>顺序只能压住静态元素，Modal、Tooltip 等 JS 动态插入的 DOM 仍会跳出容器
用 @layer + :where() 编译时注入命名空间
这是目前唯一兼顾权重控制、可维护性和兼容性的方案。核心就两行 SCSS：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
@layer bootstrap {
:where(.my-bs) {
@forward "bootstrap" with (
$body-bg: #fff,
$primary: #0d6efd
);
}
}
:where() 不增加选择器权重，你的 .btn-primary 不会被压垮；@layer 确保整套 Bootstrap CSS 归入同一层叠上下文，避免和业务样式乱序。
- 静态 HTML 只需包在
<div class="my-bs"> 内，栅格、工具类、表单控件全部自动带前缀 <li>Safari 15.4+ 原生支持；若需兼容旧版 Safari，可降级为 <code>.my-bs & { @forward "bootstrap"; }（但会轻微提权） - CSS Custom Properties（如
--bs-primary）不受:where()影响，需在:where(.my-bs)块内重定义或用:root.my-bs覆盖 - 初始化时显式传
container: '.my-bs'：new bootstrap.Modal(el, { container: '.my-bs' }) - 用
data属性触发时，统一加data-bs-container=".my-bs"，否则 JS 按默认逻辑找body - 多个命名空间共存（如后台/前台）时，
container值必须唯一，避免互相污染 - 栅格类（如
.col-md-6）依赖父容器宽度，若外层没加.my-bs，子元素加了可能导致宽度计算异常
JS 组件（Modal/Tooltip/Dropdown）样式失效怎么办
它们默认 append 到 document.body，直接跳出 .my-bs 容器，CSS 选择器匹配失败——不是报错，而是静默失效：点击无反应、弹窗没样式、下拉菜单不出现。
真正麻烦的从来不是怎么写那两行 @layer，而是 JS 组件挂载点和 CSS 作用域必须严格对齐——漏掉任何一个 container 选项，或者忘了给动态插入的节点补上 .my-bs，整个隔离就形同虚设。
