Modal开启页面“向左跳”是因Bootstrap添加modal-open类后动态设置body内联样式padding-right导致；最稳解法是使用data-bs-backdrop="static"跳过滚动条补偿逻辑，兼顾兼容性与简洁性。

为什么Modal一开页面就“向左跳”

这不是模态框本身的问题，而是bootstrap在body上加了modal-open类后，自动注入内联样式padding-right: 17px（值随系统滚动条宽度浮动），用来补偿滚动条消失造成的布局偏移。左边内容没动，右边突然变宽，视觉上就是整页“被吸向左”。macos或启用了scrollbar-width: none的环境里这个值可能为0，反而导致错位。

最稳解法：用data-bs-backdrop="static"

它直接跳过整个滚动条补偿逻辑——不加modal-open类、不设padding-right、不改overflow，只保留灰色遮罩层和ESC关闭能力。副作用是禁用点击遮罩关闭，但对后台表单、确认弹窗等场景完全够用。

• 只需在<div class="modal">标签上加属性：<code>data-bs-backdrop="static"
• 不影响data-bs-keyboard="false"等其他控制项，可叠加使用
• 不干扰CSS优先级，无兼容性风险，也不需要监听事件或手动操作DOM

必须支持点击遮罩关闭时怎么办

不能硬覆盖body { padding-right: 0 !important }——内联样式优先级高于CSS规则，且17px是动态估算值，写死会错位。真正可控的做法是手动接管滚动控制：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 监听show.bs.modal事件，执行document.body.style.overflow = 'hidden'
• 同时确保不触发modal-open类添加（即不用默认backdrop）
• 若有多层Modal，监听hidden.bs.modal时检查document.querySelectorAll('.modal.show').length > 0再决定是否恢复overflow

fixed元素错位（比如导航栏右移）

因为position: fixed元素脱离文档流，不响应body的padding-right，视觉上就表现为“固定层没动，其他内容左缩”，看起来像它右移了。

• 给所有fixed-top、fixed-bottom或自定义position: fixed元素加.is-fixed类（如<nav class="navbar fixed-top is-fixed"></nav>）
• Bootstrap内部会自动为带该类的元素同步增删padding-right，无需额外JS
• 别手动给body加!important覆盖，会破坏多设备适配
实际中最容易被忽略的是：不是所有fixed元素都加了.is-fixed，漏掉一个就会在Modal打开时明显错位；而data-bs-backdrop="static"看似简单，但一旦业务后续要求支持点击遮罩关闭，就得切回默认行为——这时候如果没清理之前的手动overflow控制逻辑，反而会引发滚动状态混乱。