modal-fullscreen类必须加在modal-dialog上，加错位置会导致全屏失效；bootstrap 5.2+才原生支持，旧版本需手动补css；全屏后滚动依赖modal-body的max-height和overflow-y设置；带-down后缀的类表示上限断点而非起始。
modal-fullscreen 类必须加在 modal-dialog 上，不是 modal 或 modal-content
加错位置是全屏失效的头号原因。Bootstrap 的尺寸逻辑完全由 modal-dialog 的 CSS 控制，modal 只管遮罩层和定位上下文，modal-content 只负责内部结构。一旦把 modal-fullscreen 错加到 modal 上，整个模态框会脱离 viewport 定位体系，出现偏移、裁切或滚动异常。
正确写法示例：
<div class="modal fade" id="fullModal">
<div class="modal-dialog modal-fullscreen"> <!-- ✅ 正确位置 -->
<div class="modal-content">
<div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body">...</div>
</div>
</div>
</div>
- ❌
<div class="modal modal-fullscreen">：遮罩层错位，内容区不响应<li>❌ <code><div class="modal-content modal-fullscreen">：只撑大内容区，header/footer 被压缩甚至消失<li>✅ 必须是 <code><div class="modal-dialog modal-fullscreen"> <h3>Bootstrap 5.2+ 才真正支持 <code>modal-fullscreen，旧版本会直接忽略如果你用的是 Bootstrap 5.1 或更早版本，
modal-fullscreen这个类根本不存在——浏览器解析时会静默丢弃，模态框看起来毫无变化。这不是你写错了，是版本不匹配。检查方式很简单：
- 打开浏览器开发者工具，选中
modal-dialog元素，看 computed 样式里有没有max-width: 100vw、margin: 0、width: 100%这些规则 - 没有？大概率是版本太低。升级到
5.2+（推荐用5.3.3）即可原生支持 - 若无法升级，得手动补 CSS：
.modal-dialog.w-100{ max-width: none !important; margin: 0 !important; }，但要注意这会破坏 transform 居中逻辑，需额外重置
全屏后内容滚动失效？关键在
modal-body的高度与溢出控制全屏不等于自动可滚动。
modal-fullscreen只解决宽度和定位，滚动行为完全由modal-body决定。如果内容多但没设约束，它会把整个modal-content顶高，导致底部被截断、滚动条不出现。实操建议：
- 给
modal-body加max-height: calc(100vh - 120px)（减去 header + footer 高度，按实际调整） - 必须配
overflow-y: auto，否则内容溢出也不显示滚动条 - 避免在
modal-body里写height: 100%——父级modal-content默认没设 height，结果就是 0 - 移动端 Safari 下，用
max-height: -webkit-fill-available更稳，兼容地址栏收放
想「所有尺寸都全屏」就用
modal-fullscreen，别加断点后缀modal-fullscreen-md-down这类带后缀的类名，意思是「在 md 及更小屏幕下才全屏」，不是「从 md 开始全屏」。很多人误以为-lg-down是桌面端生效，结果在宽屏上看到全屏，其实是窗口宽度 ≤992px 导致的。明确规则：
-
modal-fullscreen：所有断点（xs → xxl）都全屏，无条件 -
modal-fullscreen-sm-down：仅当视口宽度 ≤576px 时全屏 -
modal-fullscreen-xl-down：仅当视口宽度 ≤1200px 时全屏 - 断点后缀不是“起始”，而是“上限”——名字里的
down就是关键提示
容易被忽略的一点：如果父容器（比如某个 wrapper div）设置了
overflow: hidden或固定height，modal-fullscreen也会被截断。全屏效果依赖于完整 viewport 空间，别让中间层悄悄拦住它。 - 打开浏览器开发者工具，选中
