modal-fullscreen类必须加在<div class="modal-dialog">上才生效，加在modal或modal-content上完全无效；需Bootstrap≥5.2版本，配合-down后缀断点（如modal-fullscreen-lg-down），并为modal-body设置max-height和overflow-y:auto确保滚动。
modal-fullscreen类加在哪才生效
必须加在 <div class="modal-dialog"> 上，加在 <div class="modal"> 或 <div class="modal-content"> 上完全无效。加错位置会导致遮罩层偏移、header/footer 被压缩、滚动异常，甚至 backdrop 点击关闭失效。
常见错误写法：<div class="modal modal-fullscreen"> —— 这会让 transform: translate(-50%, -50%) 失效，模态框实际位置右偏下偏；<div class="modal-content modal-fullscreen"> —— 只撑大内容区，圆角和 padding 崩坏。
- 正确结构示例：
<div class="modal" id="fullModal"> <div class="modal-dialog modal-fullscreen-lg-down"> <!-- ✅ --> <div class="modal-content"> <div class="modal-header"></div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> - Bootstrap 5.1 及更早版本压根不认识
modal-fullscreen，浏览器静默忽略；确认版本 ≥5.2（推荐 5.3.3） - 若用 Vite/Webpack，检查 tree-shaking 是否漏掉了
modal-fullscreen-*相关 CSS 规则
为什么modal-fullscreen加了但没反应
modal-fullscreen 本身不带媒体查询，只是占位符；真正生效的是带 -down 后缀的变体，比如 modal-fullscreen-lg-down。Bootstrap 5.2 中直接写 modal-fullscreen 不会触发任何样式。
断点后缀表示“上限宽度”： lg-down 指 ≤992px 全屏，不是“≥992px 全屏”。桌面端窗口宽 1000px 就不会触发，这是预期行为。
- 想所有屏幕都全屏：用
modal-fullscreen-sm-down（sm 是最小断点，等价于无条件启用） - 桌面端也要全屏：优先试
modal-fullscreen-lg-down；若需 ≥1200px 也全屏，改用modal-fullscreen-xl-down - 别混用多个后缀，如
modal-fullscreen-md-down modal-fullscreen-lg-down，后者会覆盖前者 - 检查开发者工具中
.modal-fullscreen-lg-down是否被加载并匹配到元素
modal-body滚动失效或内容被截断
modal-fullscreen 只控制 modal-dialog 的宽高和定位，不负责滚动。默认 .modal-body 是 overflow: hidden，内容多时直接溢出不可见。
必须手动给 .modal-body 设定可滚动上下文，否则再“全屏”也没用。
- 加
max-height: calc(100dvh - 120px)（120px 是 header + footer + padding 的估算值，按实际调整） - 必须配
overflow-y: auto，只设max-height不会出滚动条 - 移动端 Safari 需额外加
-webkit-overflow-scrolling: touch启用惯性滚动 - 避免用
height: 100%或height: 100vh——vh在 iOS 地址栏显示/隐藏时会跳变，100dvh更稳（2026 年已广泛支持） - 不要对
.modal-dialog或.modal-content直接设overflow，会干扰 backdrop 点击逻辑
父容器或全局样式可能压制全屏效果
即使 modal-fullscreen 正确应用、版本达标、modal-body 也设了滚动，仍可能白屏、留白或被裁切——问题常出在外部。
典型干扰源：
- 某个 wrapper
div设了overflow: hidden或固定height，直接截断模态框渲染区域 - 页面顶部有 fixed navbar，而
modal-body的max-height没减去 navbar 高度，导致内容被顶出视口 - iOS Safari 下
100vw因地址栏动态变化抖动，modal-fullscreen内部用了width: -webkit-fill-available兜底，但自定义样式若硬写width: 100vw就失去这层保护 - 全局 CSS 里有
* { box-sizing: border-box }以外的重置，可能影响modal-content的 padding 计算
真正难的从来不是“怎么加个类”，而是加完之后，内容是否可读、可滚、可交互，且在各种设备上表现一致。
