Bootstrap模态框撑满视口需设置.modal-dialog的max-width:100vw、width:100%、margin:0，并将.modal-content的border-radius设为0；Bootstrap 5.2+才支持modal-fullscreen类，须配合断点如modal-fullscreen-md-down使用。
模态框默认宽度不够，怎么撑满整个视口
bootstrap 的 modal 默认最大宽度是 500px（.modal-dialog 有 max-width: 500px），直接加 width: 100% 不起作用——因为父容器 .modal-dialog 本身被限制了尺寸，且定位是 transform 居中，不是靠 margin 或 flex。
实操建议：
- 给
.modal-dialog加max-width: 100vw和width: 100%，再用margin: 0去掉默认外边距 - 同时把
.modal-content的border-radius设为0，否则四角会留白 - 如果用了
fade动画，确保.modal-dialog的transform不被意外覆盖（比如加了position: absolute）
示例 CSS：
.modal-fullscreen .modal-dialog {
max-width: 100vw;
width: 100%;
margin: 0;
}
.modal-fullscreen .modal-content {
border-radius: 0;
}Bootstrap 5 自带的 modal-fullscreen 类为什么没反应
这个类只在 Bootstrap 5.2+ 才正式支持，且必须配合响应式断点使用，比如 modal-fullscreen-md-down —— 它不是无条件全屏，而是“在 md 及更小屏幕下全屏”。如果你直接写 class="modal-fullscreen"，浏览器会忽略它，因为没有对应 CSS 规则。
常见错误现象：
- 页面没变化，模态框还是老样子 → 检查 Bootstrap 版本是否 ≥5.2
- 加了
modal-fullscreen-lg-down却在桌面端全屏 → 这是正常行为，lg-down表示 lg 及以下都生效，桌面端若窗口宽度 ≤992px 就会触发 - 全屏后内容被截断 → 很可能是
.modal-body没设max-height或overflow-y: auto
推荐写法（适配大多数场景）：class="modal-dialog modal-fullscreen-md-down"
全屏模态框里滚动条不出现或错位
Bootstrap 全屏时，.modal 的 overflow-y 默认是 auto，但真正决定是否滚动的是 .modal-body。如果内容少，它不会撑开；如果内容多，又没设高度约束，就会把整个模态框顶高，导致底部消失或滚动失效。
实操建议：
- 给
.modal-body加max-height: calc(100vh - 120px)（减去 header + footer 高度） - 必须配
overflow-y: auto，否则内容溢出也不显示滚动条 - 避免在
.modal-body里用height: 100%—— 它依赖父元素高度，而.modal-content没设height，结果就是 0
关键样式片段：
.modal-fullscreen .modal-body {
max-height: calc(100vh - 120px);
overflow-y: auto;
}移动端全屏模态框顶部被状态栏遮挡
iOS Safari 和部分安卓浏览器会在全屏时把状态栏（时间、信号）压进页面顶部，而 Bootstrap 的 .modal-header 默认离顶部只有 1rem，视觉上就被吃掉了一截。
原因在于：viewport 的 env(safe-area-inset-top) 没被考虑。不处理的话，用户第一眼看不到标题，以为没弹出来。
解决方法很简单，但容易被忽略：
- 给
.modal-header加padding-top: env(safe-area-inset-top) - 同时补一个 fallback：
padding-top: constant(safe-area-inset-top)（旧版 iOS 支持） - 别只加在
.modal-header，如果用了自定义顶部栏，也要同步处理
一行够用：
.modal-header {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}实际项目里最常漏的是 safe-area 适配和 .modal-body 的滚动控制——其他都能靠 CSS 调，这两处一漏，用户在真机上立刻觉得“不对劲”，但又说不清哪有问题。
