应使用Bootstrap内置的modal-fullscreen类加在modal-dialog上，配合断点后缀（如modal-fullscreen-lg-down），并为modal-body设置max-height和overflow-y: auto以确保滚动，避免手动覆盖width/margin破坏居中逻辑。
模态框全屏的 CSS 类怎么写才不破坏 Bootstrap 原有逻辑
直接给 .modal-dialog 加 width: 100vw; height: 100vh; 会出问题：滚动条消失、内容被截断、移动端键盘弹出后模态框错位。Bootstrap 的 .modal-dialog 默认是 inline-block + transform 定位，强行拉伸会绕过它的居中计算逻辑。
正确做法是复用 Bootstrap 自带的 .modal-fullscreen 类（v5.1+），它已预设了响应式断点：
<div class="modal-dialog modal-fullscreen"> <div class="modal-content">...</div> </div>
如果必须自定义，优先覆盖 .modal-dialog 的 max-width 和 margin，保留其 transform 居中机制：
-
max-width: 100% !important;（避免被父容器限制） -
margin: 0 !important;（清除默认上下 margin） -
width: 100% !important;（仅在需要时加，慎用） - 不要碰
transform或top/left—— Bootstrap 依赖它做垂直居中
如何让全屏模态框在小屏下自动缩回为常规尺寸
Bootstrap 的 .modal-fullscreen 默认只在 sm 及以上生效，即 min-width: 576px。如果你希望「仅在桌面端全屏、移动端保持标准尺寸」，直接用原生类即可：
立即学习“前端免费学习笔记（深入）”；
<div class="modal-dialog modal-fullscreen-md-down">
这个类的意思是：从 md（768px）开始向下（md, sm, xs）启用全屏；反之，若想「仅在大屏全屏」，用 modal-fullscreen-lg-down 或自定义媒体查询：
@media (min-width: 992px) { .my-fullscreen .modal-dialog { width: 100%; max-width: 100%; margin: 0; } }- 注意：别在媒体查询里写
height: 100vh—— 移动端键盘弹出会触发 viewport 高度变化，导致内容被顶出可视区 - 更稳妥的方式是用
min-height: 100vh+overflow-y: auto控制内部滚动
全屏模态框里内容溢出或滚动失效怎么办
常见现象：.modal-body 内容撑开、底部被遮挡、滚动条不出现。根本原因是 .modal-content 缺少高度约束，且 .modal-body 默认是 flex: 1 1 auto，但父级没设 display: flex。
修复步骤：
- 给
.modal-content加display: flex; flex-direction: column; height: 100%; - 给
.modal-header和.modal-footer设固定高度或flex-shrink: 0 - 给
.modal-body加flex: 1 1 0;+overflow-y: auto; - 避免在
.modal-body里用position: absolute或height: 100%—— 它会脱离 flex 流程
示例片段：
.modal-content {
display: flex;
flex-direction: column;
height: 100%;
}
.modal-body {
flex: 1 1 0;
overflow-y: auto;
}IE11 或旧版 Safari 下全屏模态框错位的兼容处理
vh 单位在 iOS Safari（尤其是 10–12）和 IE11 中表现异常：viewport 高度包含地址栏，滚动后 100vh 不收缩，导致底部留白或内容被裁。这不是 Bootstrap 的 bug，而是浏览器实现缺陷。
临时方案（不推荐 JS）：
- 用
min-height: -webkit-fill-available;替代height: 100vh（仅 Safari） - 对 IE11 单独用
height: calc(100vh - 4rem);（减去 header/footer 预估高度） - 最稳的方式：放弃全屏高度，改用
max-height: 80vh+overflow-y: auto，既兼容又符合可访问性规范 - 千万别用
document.documentElement.clientHeight动态设 style —— 滚动时频繁重排，卡顿明显
真正难的不是写全屏样式，而是判断什么时候不该全屏：比如表单页、长列表、含 iframe 的场景，强制全屏反而损害体验。
