modal-fullscreen-md-down 表示在视口宽度≤768px时启用全屏，需Bootstrap 5.2+、加在modal-dialog上，且须确保CSS加载完整、.modal-body设置max-height和overflow-y:auto以避免内容截断。
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的规则 - 类名加错位置：必须加在
<div class="modal-dialog"> 上，加在 <code><div class="modal"> 或 <code><div class="modal-content"> 上无效<li>父容器限制高度/溢出：如果 <code>或某个 wrapper 有overflow: hidden或固定height，会截断模态框渲染区域 -
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默认设了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
modal-fullscreen-md-down 和 modal-fullscreen 的关键区别
两者行为差异直接取决于 Bootstrap 版本和断点逻辑：
全屏后内容滚动失效或被截断
这不是 modal-fullscreen-md-down 本身的问题，而是 .modal-body 缺少滚动上下文：
最易被忽略的是：移动端 Safari 下，状态栏会遮挡 .modal-header 顶部，即使用了 modal-fullscreen-md-down。这时得单独给 .modal-header 加 padding-top: env(safe-area-inset-top)，而不是去调 .modal-dialog 的 margin。
