Bootstrap 模态框(Modal)全屏模式断点 modal-fullscreen-md-Bootstrap教程-PHP中文网

modal-fullscreen-md-down 表示在视口宽度≤768px时启用全屏，需Bootstrap 5.2+、加在modal-dialog上，且须确保CSS加载完整、.modal-body设置max-height和overflow-y:auto以避免内容截断。

bootstrap 模态框(modal)全屏模式断点 modal-fullscreen-md

modal-fullscreen-md-down 表示“在 md（768px）及更小视口宽度下启用全屏”，桌面端窗口宽度 ≤768px 时才会触发——不是“中屏及以上全屏”，也不是“仅手机全屏”。如果你在桌面浏览器里缩窄窗口到 760px，它会全屏；拉宽到 770px，就退回默认尺寸。

为什么加了 `modal-fullscreen-md-down` 却没反应

常见原因不是写错了类名，而是版本或加载问题：

Bootstrap 版本低于 5.2：该类从 5.2 开始引入，5.1.x 及更早版本压根没有对应 CSS 规则
CSS 未正确加载：构建工具（如 Vite/Webpack）可能因 tree-shaking 漏掉 modal-fullscreen 相关样式，检查最终生成的 CSS 是否包含 .modal-fullscreen-md-down 的规则
类名加错位置：必须加在 上，加在或上无效
父容器限制高度/溢出：如果或某个 wrapper 有 overflow: hidden 或固定 height，会截断模态框渲染区域



modal-fullscreen-md-down 和 modal-fullscreen 的关键区别
两者行为差异直接取决于 Bootstrap 版本和断点逻辑：

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


modal-fullscreen：Bootstrap 5.3+ 支持无条件全屏（所有断点都生效）；5.2 中不支持纯 modal-fullscreen，需用 modal-fullscreen-xl-down 模拟

modal-fullscreen-md-down：在 5.2+ 中明确表示「≤768px 全屏」，桌面端窗口 >768px 时自动回退为常规模态框（含 max-width: 500px）
断点后缀不是“匹配即生效”，而是“向下兼容”：-md-down 包含 sm、xs，但不包含 lg 及以上
不要混用多个断点类：比如同时写 modal-fullscreen-md-down modal-fullscreen-lg-down，后者会覆盖前者，实际变成 ≤992px 全屏

全屏后内容滚动失效或被截断
这不是 modal-fullscreen-md-down 本身的问题，而是 .modal-body 缺少滚动上下文：


.modal 默认设了 overflow-y: auto，但它只管遮罩层，不管内容区高度

.modal-body 必须显式设置 max-height + overflow-y: auto，否则内容撑高整个 .modal-content，导致底部消失或滚动条不出现
推荐写法：.modal-fullscreen-md-down .modal-body {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
（减去 header + footer 预估高度，120px 是常见值，按实际调整）
避免在 .modal-body 里写 height: 100%：它的父级 .modal-content 没设 height，结果就是 0

最易被忽略的是：移动端 Safari 下，状态栏会遮挡 .modal-header 顶部，即使用了 modal-fullscreen-md-down。这时得单独给 .modal-header 加 padding-top: env(safe-area-inset-top)，而不是去调 .modal-dialog 的 margin。