移动端模态框弹出时页面仍可滚动，根本原因是Bootstrap依赖的modal-open类被CSS覆盖或JS未触发；应补body.modal-open { overflow: hidden !important; }兜底，而非直接设置body { overflow: hidden }，否则会破坏关闭后滚动恢复逻辑。
移动端模态框弹出时页面还能滚动？补 body.modal-open { overflow: hidden !important; }
Bootstrap 默认靠 JS 给 body 加 modal-open 类并设 overflow: hidden，但这个样式极易被自定义 CSS 覆盖或忽略。直接写 body { overflow: hidden } 会破坏关闭后的恢复逻辑，导致页面永久锁死。
真正有效的兜底方式是提高选择器优先级：
- 在全局 CSS 文件末尾（确保在 Bootstrap CSS 之后加载）加入：
body.modal-open { overflow: hidden !important; } - 检查开发者工具中
body元素是否确实带有modal-open类——如果没出现，说明 JS 未触发或被拦截（比如用了data-bs-backdrop="static"却没配对调用） - 避免在 SCSS 中重写
.modal-open规则，尤其别用!important覆盖它本身
模态框从底部弹出但位置偏移？改 .modal-dialog 的 transform 和 top/bottom
Bootstrap 默认居中，移动端要底部停靠，不能只靠 margin-top: auto 或硬设 top: auto; bottom: 0 —— 因为 .modal-dialog 有默认 transform: translate(-50%, -50%)，会把 bottom=0 拉偏。
正确做法是覆盖 transform 并重置定位锚点：
立即学习“前端免费学习笔记（深入）”；
- 给模态框容器加自定义类，比如
modal-bottom-sheet - 对应 CSS 写：
.modal-bottom-sheet .modal-dialog { margin: 0; top: auto; bottom: 0; transform: none; } .modal-bottom-sheet .modal-content { border-radius: 1rem 1rem 0 0; } - 动画过渡建议用
transform: translateY()替代top，避免重排，更流畅
全屏模态框在 iOS 上顶部被状态栏遮住？用 env(safe-area-inset-top)
单纯加 modal-fullscreen 类后，在 iPhone Safari 下常发现 .modal-header 被系统状态栏盖住，这不是 bug，而是 viewport 未适配安全区域。
修复只需微调 header 内边距，不碰 .modal-dialog：
.modal-fullscreen .modal-header { padding-top: env(safe-area-inset-top, 0); }- 确保
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">已存在，否则env()不生效 - 不要用
padding-top: constant(safe-area-inset-top)—— iOS 11.2+ 已废弃，仅env()可靠
手动补偿滚动条宽度却失效？别硬编码 15px，用动态测量
模态框打开时页面“向左抖一下”，本质是 body 隐藏滚动条后宽度突变。很多教程教你写 padding-right: 15px，但不同设备滚动条宽度差异大（Windows 常 17px，macOS 无原生滚动条，iOS 无此问题）。
必须运行时读取真实值：
- 用
getScrollbarWidth()函数获取精确宽度（返回 0 表示无滚动条，如 macOS 或移动端） - 在
show.bs.modal事件里设置：document.addEventListener('show.bs.modal', e => { const w = getScrollbarWidth(); document.body.style.paddingRight = w ? `${w}px` : ''; document.body.style.overflow = 'hidden'; }); - 关闭时务必在
hidden.bs.modal里清空padding-right，否则后续页面布局错乱
移动端 Safari 对 padding-right 敏感，若父容器用了 flex 或 position: fixed，补偿可能被忽略——这时应优先检查是否已启用 modal-fullscreen 类，它内部已封装该逻辑。
