bootstrap模态框抖动主因是fixed元素未同步补偿padding-right，应为fixed元素加.is-fixed类或用data-bs-backdrop="static"禁用补偿逻辑。
直接加 body { padding-right: 0 !important } 不但无效，还会让抖动更严重——因为 Bootstrap 5+ 是通过内联样式动态写 padding-right（比如 style="padding-right: 17px"），!important 压不住它。
为什么加 padding-right 反而抖？
Bootstrap 给 body 加 padding-right 是为了填平滚动条消失造成的宽度缺口，但它只改 body 的流式内容区域。所有 position: fixed 元素（比如 .fixed-top 导航栏、全屏背景图、侧边栏）完全不受影响，结果就是：内容被向右推，fixed 元素原地不动，视觉上像整个页面“向左一缩”。
- 抖动不是没补偿，是补偿“错位”了
- 常见错误：全局写了
body { padding-right: 0 !important }，导致后续hidden.bs.modal事件还原逻辑失效 - 如果你用了
overlay-scrollbars或scrollbar-gutter: stable both，Bootstrap 的宽度检测会返回0，补偿值错乱甚至反向
给 fixed 元素加 .is-fixed 类
这是 Bootstrap 5 内置的、最轻量也最可靠的同步补偿方式：.is-fixed 本身无样式，只是个 JS 钩子，Bootstrap 会在 modal-open 状态变化时，自动为带该类的元素同步增减 padding-right。
- 必须显式加在所有需要对齐的 fixed 元素上：
<nav class="navbar fixed-top is-fixed"></nav>、<div class="hero-bg is-fixed"> <li>仅对 <code>fixed-top、fixed-bottom、sticky-top和带.is-fixed的元素生效 - 不加这个类，手动监听
show.bs.modal/hidden.bs.modal同步padding-right极易漏事件或重复执行，尤其在多层 modal 场景下 - 只需在模态框根元素上加：
<div class="modal" data-bs-backdrop="static"> <li>不影响其他组件（如下拉菜单、Tooltip），也不干扰第三方滚动库</li> <li>适用于不需要点击遮罩关闭的场景（如权限提示、表单确认、操作反馈弹窗）</li> <li>如果后续要恢复点击关闭，删掉这个属性即可，无残留副作用</li> <h3>慎用 <code>scrollbar-gutter替代方案scrollbar-gutter: stable both是浏览器原生占位方案，对 fixed 元素天然友好，但它不能单独生效，必须配合禁用 Bootstrap 的 JS 补偿逻辑。- CSS 中设置：
body { scrollbar-gutter: stable both; } - 清掉 Bootstrap 注入的 padding：
body.modal-open { padding-right: 0 !important; } - JS 初始化前覆盖默认行为：
Bootstrap.Modal.Default.scrollbarWidth = 0; - 注意 fallback：iOS Safari 17.4 之前、旧版 Edge 不支持
scrollbar-gutter，需用CSS.supports('scrollbar-gutter', 'stable')检测并回退
真正难的不是选哪个方案，而是排查有没有第三方库（比如
perfect-scrollbar或全局重置 CSS）悄悄改了body的overflow或内联padding-right——这些干扰项往往比补偿逻辑本身更难定位。 - CSS 中设置：
用 data-bs-backdrop="static" 跳过补偿流程
这是最干净的禁用方式：它跳过整个滚动条宽度检测、不加 modal-open 类、不写内联 padding-right、也不设 overflow: hidden，只禁用点击遮罩关闭，保留 ESC 键关闭能力。
