Bootstrap全屏模态框 Modal全屏展示配置-Bootstrap教程-PHP中文网

必须加在 div.modal-dialog 上，因 Bootstrap 模态框尺寸逻辑由该元素 CSS 控制；加在 modal 或 modal-content 上会导致全屏失效、内容裁切、滚动异常及 backdrop 失效。

bootstrap全屏模态框 modal全屏展示配置

modal-fullscreen 类加在哪个元素上才有效

必须加在 div.modal-dialog 上，不是 div.modal 或 div.modal-content。加错位置会导致全屏失效、内容被裁切、滚动异常，甚至 backdrop 点击无响应。

常见错误写法：

 —— 这会让模态框脱离 viewport 定位体系，transform: translate(-50%, -50%) 失效，实际位置偏移； —— 只撑大内容区，header/footer 高度失控，圆角残留。正确结构示例：
<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>
Bootstrap 5.2+ 中 modal-fullscreen 为什么没反应
因为 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 加两样东西：

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										


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。