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">标签上加属性：data-bs-backdrop="static" - 不影响
data-bs-keyboard="false"等其他控制项，可叠加使用 - 不干扰CSS优先级，无兼容性风险，也不需要监听事件或手动操作DOM
必须支持点击遮罩关闭时怎么办
不能硬覆盖body { padding-right: 0 !important }——内联样式优先级高于CSS规则，且17px是动态估算值，写死会错位。真正可控的做法是手动接管滚动控制：
- 监听
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">） - Bootstrap内部会自动为带该类的元素同步增删
padding-right，无需额外JS - 别手动给
body加!important覆盖，会破坏多设备适配
fixed元素都加了.is-fixed，漏掉一个就会在Modal打开时明显错位；而data-bs-backdrop="static"看似简单，但一旦业务后续要求支持点击遮罩关闭，就得切回默认行为——这时候如果没清理之前的手动overflow控制逻辑，反而会引发滚动状态混乱。 
