必须加在 div.modal-dialog 上，因 Bootstrap 模态框尺寸逻辑由该元素 CSS 控制；加在 modal 或 modal-content 上会导致全屏失效、内容裁切、滚动异常及 backdrop 失效。
modal-fullscreen 类加在哪个元素上才有效
必须加在 div.modal-dialog 上，不是 div.modal 或 div.modal-content。加错位置会导致全屏失效、内容被裁切、滚动异常，甚至 backdrop 点击无响应。
常见错误写法：<div class="modal modal-fullscreen"> —— 这会让模态框脱离 viewport 定位体系，<code>transform: translate(-50%, -50%) 失效，实际位置偏移；<div class="modal-content modal-fullscreen"> —— 只撑大内容区，header/footer 高度失控，圆角残留。<p>正确结构示例：</p><pre class="brush:php;toolbar:false;"><div class="modal" id="fullModal">
<div class="modal-dialog modal-fullscreen"> <!-- ✅ 正确位置 -->
<div class="modal-content">
<div class="modal-header">...</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div></pre><h3>Bootstrap 5.2+ 中 modal-fullscreen 为什么没反应</h3>
<p>因为 <code>modal-fullscreen 不是无条件生效的类——它从 5.2 开始引入，但默认只在特定断点下触发。直接写 modal-fullscreen 在 5.2 中无效（5.3+ 才支持无后缀全断点），必须配合响应式变体，例如：
-
modal-fullscreen-md-down：窗口宽度 ≤768px 时全屏（手机/平板） -
modal-fullscreen-lg-down：≤992px 时全屏（含部分桌面窄窗） -
modal-fullscreen-xl-down：≤1200px 时全屏
检查项：
- 确认 Bootstrap CSS 和 JS 版本 ≥5.2（用
bootstrap.bundle.min.js，别漏掉 CSS） - 若用构建工具（Vite/Webpack），确认未因 tree-shaking 移除
modal-fullscreen相关 CSS 规则 - 浏览器开发者工具中搜索
.modal-fullscreen-md-down是否被加载并匹配到元素
全屏后内容溢出、滚动条不出现
这不是模态框没“满屏”，而是 .modal-body 缺少可滚动上下文。Bootstrap 的 .modal-dialog 是 flex 容器，.modal-content 默认无高度约束，内容直接撑高整个视口，滚动条无处安放。
必须手动给 .modal-body 加两样东西：
-
max-height: calc(100vh - 120px)（减去 header + footer 实际高度，如 60px + 60px） -
overflow-y: auto（仅max-height不会触发滚动）
移动端 Safari 需额外加：-webkit-overflow-scrolling: touch 启用惯性滚动；避免用 height: 100%，父级 .modal-content 没设 height，结果就是 0 高度。
为什么手动覆盖 width/margin 很危险
很多人试 .modal-dialog { width: 100%; margin: 0; }，这会破坏 Bootstrap 内部三重定位逻辑：
-
transform: translate(-50%, -50%)仍按原始尺寸计算偏移，导致模态框实际位置偏右偏下 -
.modal-content的padding依赖.modal-dialog的max-width计算，硬设width会让内边距塌缩 - 移动端 Safari 下
100vw因地址栏显示/隐藏抖动，而modal-fullscreen内部用了width: -webkit-fill-available兜底 - 若父容器（如某个 wrapper）有
overflow: hidden或固定高度，也会压制全屏表现
真正要“所有尺寸都强制全屏”，用 modal-fullscreen-xl-down（模拟无断点）比手写 CSS 更稳；真需定制，优先覆盖 .modal-dialog 的 max-width 和 margin，而非 width。
最易被忽略的一点：全屏模态框里点击 backdrop 默认关闭，但搜索、表单等场景常需 data-bs-backdrop="static" 锁定，否则用户点空白就退出——这个属性得加在 div.modal 上，不是按钮或 dialog。
