直接写 body { padding-right: 0 !important } 失效，是因为 Bootstrap 动态添加的 modal-open 类本身不设 padding，真正生效的是 body 上的内联 style="padding-right: 17px"，其优先级高于任何普通 CSS 规则（包括 !important），且该值随系统/浏览器滚动条宽度变化，硬编码会导致错位。
为什么直接写 body { padding-right: 0 !important } 会失效
因为 Bootstrap 的 modal-open 类是动态加在 上的，且内联样式（如 style="padding-right: 17px"）优先级高于普通 CSS 规则。单纯用 !important 覆盖类选择器（如 .modal-open）往往没用，除非你精准命中那个内联 style。
更关键的是：这个 17px 是滚动条宽度的估算值，不同系统/浏览器差异大（macOS 隐藏滚动条时可能是 0，Windows 可能是 12–17px），硬写死会错位。
- 不要用
body { padding-right: 0 !important }—— 它可能被内联 style 覆盖，或导致 modal 内容右侧被裁切 - 避免
.modal-open { padding-right: 0 !important }—— 这个类本身不带 padding，真正起作用的是body的内联 style - 别在全局 CSS 里用
overflow-y: scroll强制显示滚动条 —— 会破坏移动端体验，且在无内容溢出时多出空滚动条
data-bs-backdrop="static" 是最轻量的解法
它跳过整个滚动条补偿逻辑：不加 modal-open 类、不设 padding-right、不改 body 的 overflow，只保留遮罩层和禁用背景点击关闭。
适合绝大多数后台管理页、表单确认弹窗等不需要点背景关闭的场景。
立即学习“前端免费学习笔记（深入）”；
- 只需在 modal 标签加属性：
<div class="modal" data-bs-backdrop="static"> <li>完全不干扰原有 CSS 和 JS 流程，无兼容性风险</li> <li>如果后续需要支持点击遮罩关闭，再切回默认行为即可，无需清理副作用</li> <li>注意：它不会阻止键盘 <code>Esc关闭，如需禁用 Esc，得额外加data-bs-keyboard="false" - 监听
show.bs.modal事件，执行：document.body.style.overflow = 'hidden'; document.body.style.paddingRight = '0'; - 监听
hidden.bs.modal事件，执行：if ($('.modal.show').length === 0) { document.body.style.overflow = ''; document.body.style.paddingRight = ''; } - 不要用
document.body.classList.add('modal-open')—— 这会触发 Bootstrap 的补偿逻辑，白干 - 滚动条宽度不用硬编码，
0就够了；因为你不靠 padding 补偿，而是靠overflow: hidden直接禁用滚动 - 给受影响的 fixed 元素加
right: calc(var(--scrollbar-width, 0px))，并在 JS 中动态设置--scrollbar-widthCSS 变量 - 更简单的方法：统一用
data-bs-backdrop="static"，从源头去掉 padding 行为 - 如果必须用默认 modal 行为，可对 fixed 元素加
transform: translateX(calc(var(--scrollbar-width, 0px)))做视觉对齐
手动接管滚动控制时，必须同步 overflow 和 padding-right
当必须保留点击遮罩关闭能力，又不想抖动，就得绕过 Bootstrap 自动补偿，自己算、自己设、自己清。
核心是两件事：① 在 show.bs.modal 时设 document.body.style.overflow = 'hidden'；② 在 hidden.bs.modal 时还原，且只在还有其他 modal 显示时才保留 overflow: hidden。
fixed 元素在 modal 弹出时偏移怎么办
当页面有 position: fixed 元素（比如顶部导航栏、右下角悬浮按钮），而 body 被加了 padding-right，这些元素不会自动右移补偿，视觉上就像“被拉向左边”。
这不是 bug，是 CSS 定位规则决定的：fixed 元素相对于 viewport 定位，不受 body padding 影响，但周围内容被 padding 推开了，造成相对位移错觉。
真正麻烦的不是抖动本身，而是它常和第三方滚动库（如 overlay-scrollbars）或自定义 scrollbar-width: none 冲突——此时 Bootstrap 检测不到滚动条宽度，补偿值为 0，但实际滚动条消失，页面仍会跳。这种情况下，手动接管 + overflow: hidden 是唯一可靠路径。
