modal-fullscreen 类必须加在 modal-dialog 上，加在 modal 或 modal-content 上无效；错误位置会导致显示异常，需确保父容器无 overflow 限制并做好滚动隔离。
modal-fullscreen 类必须加在 modal-dialog 上
Bootstrap 5 的全屏模态框不是靠写 CSS 覆盖实现的，而是用 modal-fullscreen 这个内置类。但它只能生效于 modal-dialog 元素——加在 modal 或 modal-content 上都无效。
常见错误是把类加错位置，比如：
❌ <div class="modal modal-fullscreen">
<br>
❌ <code><div class="modal-content modal-fullscreen">
<br>
✅ 正确写法：<code><div class="modal-dialog modal-fullscreen">
<ul>
<li>加错位置会导致模态框不占满视口、头部/底部被裁切、关闭按钮偏移</li>
<li>如果用了旧版 Bootstrap（modal-fullscreen 不存在，得手动加 <code>class="w-100 h-100" 并配合 style="max-width: none; margin: 0;"
modal-fullscreen-sm-down（仅小屏全屏）父容器 overflow 或 height 限制会破坏全屏效果
即使加了 modal-fullscreen，模态框仍显示为窄框或顶部留白，大概率是外层容器（比如 body、某个 wrapper div 或 CMS 注入的 layout 容器）设置了 overflow: hidden 或固定 height。
- 检查
body是否有height: 100vh或max-height类；Bootstrap 本身会在模态框打开时加overflow: hidden到body，但这是临时的、可控的，问题通常出在你自己写的样式上 - 某些 UI 框架（如 Vue Router 的
<router-view></router-view>包裹层）会默认设overflow: auto，需显式覆盖 - 移动端 Safari 中，若页面根节点没设
height: 100%，100vh在地址栏收放时会抖动，建议对modal-content用height: 100dvh（注意兼容性：Chrome 109+、Safari 16.4+ 支持）
内容区滚动和高度必须手动控制
全屏后，长内容撑开模态框、底部被截断、或整个页面跟着滚动——这不是模态框没全屏，而是 modal-body 缺少滚动约束。
-
modal-body必须设固定高度 +overflow-y: auto，例如：style="max-height: calc(100dvh - 120px); overflow-y: auto;"（减去 header/footer 高度） - 别依赖
h-100：它只继承父级高度，而modal-content默认没有显式高度，h-100会失效；改用min-vh-100或style="height: 100dvh" - iOS Safari 下，若顶部被状态栏遮挡，不要调
modal-dialog的margin-top，而是在modal-header上加padding-top: env(safe-area-inset-top)
移动端横竖屏切换时留白或错位
横屏下模态框左右留白，是因为 modal-fullscreen 默认按 100vh 高度撑开，但横屏时 viewport width > height，导致宽度不足。
- 原生类不自动适配横屏宽度，需额外补一条 CSS：
.modal-fullscreen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }不推荐；更稳妥的是给modal-content加width: 100vw和height: 100dvh - 避免用
transform: translate(-50%, -50%)居中逻辑干扰——modal-fullscreen已禁用该 transform，手动加反而引发偏移 - 不要用
!important覆盖modal-dialog的margin：它会破坏 backdrop 的 z-index 层级，导致点击背景无法关闭模态框
真正卡住全屏效果的，往往不是类名没加对，而是某一层父容器悄悄设了 overflow 或 height，或者 modal-body 没做滚动隔离。这些地方一漏，全屏就变成“看起来像全屏”。
