根本原因是body在模态框显示时被设overflow:hidden，导致滚动条消失、内容宽度突变而左右晃动；bootstrap通过动态padding-right补偿滚动条宽度，但易被css覆盖或计算不准。
为什么模态框打开时页面会左右晃动？
根本原因是 body 在 Modal 显示时被加了 overflow: hidden，但浏览器默认滚动条占位（尤其在 Windows 和旧版 macOS），导致 body 宽度突然变大、内容左移——关闭时又弹回。这不是 Bootstrap 的 bug，而是 CSS 滚动条行为的副作用。
用 padding-right 补偿滚动条宽度最稳妥
Bootstrap 5.3+ 内置了 .modal-open 类自动给 body 加 padding-right（值等于滚动条宽度），但前提是没被其他样式覆盖或重置。实操中常失效，需手动加固：
- 确认未在全局 CSS 中写
body { padding-right: 0 !important; }或重置box-sizing - 如果用了自定义滚动条（如
scrollbar-width: none），要同步调整补偿值，否则会多留白 - 在移动端（Safari/iOS）滚动条不占位，
padding-right反而造成右侧空白，建议用媒体查询隔离：@media (hover: hover) and (pointer: fine) { .modal-open { padding-right: var(--bs-body-scroll-x, 0); } }
禁用 body 滚动但保留占位（兼容老项目）
有些项目不敢动 body 的 padding，改用「占位不消失」策略：让滚动条始终存在，只锁住滚动。关键不是隐藏，而是稳住布局流：
- 给
body设overflow-y: scroll（强制显示滚动条），再通过.modal-open { overflow: hidden; }锁住滚动 - 必须配合
html { overflow-y: hidden; }防止 Safari 双重滚动 - 注意：这会让非模态页也永远带滚动条，若设计不允许，此方案不可取
用 position: fixed 替代 overflow: hidden（高阶控制）
这是最彻底的解法，绕过滚动条宽度问题本身。Modal 显示时，把 body 设为 position: fixed; top: calc(-1 * var(--bs-modal-scroll-y, 0px));，用定位冻结视口，同时保留原始滚动位置变量供关闭后还原：
- 需要 JS 配合读取并保存
window.scrollY到--bs-modal-scroll-y - Modal 关闭后，先恢复
body样式，再window.scrollTo(0, savedY) - 比纯 CSS 方案多几行 JS，但完全规避滚动条抖动和 padding 补偿误差
真正麻烦的不是选哪种方案，而是检查是否已有第三方库（比如某些 UI 组件或重置 CSS）悄悄修改了 body 的 overflow 或 padding —— 这些隐性覆盖往往比技术方案本身更难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
