modal开启时页面“向左跳”是因bootstrap 5+在show.bs.modal触发时给body加padding-right补偿滚动条消失，但fixed元素不响应该样式；推荐用data-bs-backdrop="static"跳过补偿，或为所有fixed元素添加.is-fixed类让bootstrap自动同步padding-right。
为什么Modal一开页面就“向左跳”
这不是模态框渲染问题，而是Bootstrap 5+在show.bs.modal触发时，主动给body加内联样式padding-right: 17px（值随系统滚动条宽度浮动），用来补偿overflow: hidden导致的滚动条消失。但position: fixed元素（比如.fixed-top导航栏）不响应这个padding-right，视觉上就是流式内容左缩、fixed层原地不动——看起来像整个页面被吸向左。
macOS或启用了scrollbar-width: none的环境里，这个估算值可能为0，反而造成右侧空白；用了overlay-scrollbars等第三方滚动库后，DOM宽度计算失效，补偿逻辑直接错乱。
最稳解法：用data-bs-backdrop="static"
它跳过整个滚动条补偿流程：不加modal-open类、不设padding-right、不改body的overflow，只禁用点击遮罩关闭，保留ESC键关闭能力。
- 写法：
<div class="modal" data-bs-backdrop="static"> <li>不影响<code>data-bs-keyboard="false"等其他属性，可叠加使用 - 不污染CSS优先级，无兼容性风险，也不需要监听事件或手动操作DOM
- 适合权限确认、表单提交成功提示、单次操作反馈等不需要点背景关闭的场景
- 给所有fixed元素显式加该类：
<nav class="navbar fixed-top is-fixed"></nav>、<header class="hero-bg is-fixed"></header> -
.is-fixed本身无样式，只是个JS钩子，不影响非Modal场景 - 漏掉任何一个fixed元素（比如自定义悬浮按钮或全屏背景图），Modal打开时就会明显错位
- 别手动覆盖
body { padding-right: 0 !important }——内联样式优先级更高，且硬编码值在不同设备上必然错位 - 监听
hidden.bs.modal事件 - 用
document.querySelectorAll('.modal.show').length统计当前可见Modal数量 - 只有数量为0时，才执行
document.body.classList.remove('modal-open') - 避免在关闭逻辑里直接写
$('body').removeClass('modal-open')——jQuery可能因异步漏操作
必须支持点击遮罩关闭？那就加.is-fixed类
Bootstrap内部会自动为带.is-fixed的position: fixed元素同步增删padding-right，无需额外JS。
多层Modal关闭后背景意外可滚？检查.show实例数
Bootstrap默认“任意一个Modal关闭就删modal-open”，嵌套时上层还在显示，下层一关，背景就漏出滚动。不能靠$('.modal').hasClass('show')判断，DOM可能不同步。
真正容易被忽略的是：不是所有fixed元素都加了.is-fixed，漏一个就错位；而data-bs-backdrop="static"看似简单，但一旦后续需求变更要支持点击遮罩关闭，就得切回默认行为——这时候如果没清理之前的手动补偿逻辑，抖动会重新出现。
