Bootstrap 5 全屏模态框需将 modal-fullscreen 类加在 modal-dialog 上，并清除其 max-width 和 margin；配合 100dvh 高度、modal-body 滚动控制及正确 JS 初始化时机，才能实现真正全屏效果。
Bootstrap 5 的 modal-fullscreen 类直接生效但有断点限制
bootstrap 5 内置了全屏模态框支持，不是靠自己写 css 覆盖，而是用 modal-fullscreen 这个类。但它默认只在特定视口宽度下触发——比如 modal-fullscreen-md-down 表示「中屏及以下才全屏」，modal-fullscreen（无后缀）则从最小屏开始就全屏。
- 常见错误：只加
modal-fullscreen却没删掉modal-dialog默认的 max-width 和 margin，导致视觉上还是居中窄框 - 必须确保模态框结构是：
div.modal > div.modal-dialog > div.modal-content，且modal-fullscreen加在modal-dialog上，不是modal - 如果想「所有尺寸都强制全屏」，用
modal-fullscreen；若只想手机/平板全屏、桌面恢复常规尺寸，选带断点的变体，如modal-fullscreen-sm-down
自定义全屏需覆盖 modal-dialog 的 max-width 和 margin
内置类不够用时（比如要兼容 Bootstrap 4，或需要精确控制滚动行为），就得手动干预样式。核心是干掉 modal-dialog 的约束性声明，否则即使设了 width: 100% 也会被 max-width 截断。
- 关键 CSS 规则：
.modal-dialog { width: 100%; max-width: none; margin: 0; } - 别忘了加
height: 100vh到.modal-content或.modal-body，否则内容区不会撑满视口高度 - 移动端容易出问题：iOS Safari 对
vh单位有滚动缩放 bug，用100dvh更稳（但注意兼容性，dvh是 2023 年后才普及）
全屏 Modal 中内容溢出和滚动行为不一致
全屏后，用户常遇到内容被截、无法滚动、或者整个页面跟着动。这不是模态框没写对，而是 body 的 overflow 没处理好，或者子容器没设 overflow-y: auto。
- Bootstrap 5 自动给
body加overflow: hidden，但仅限于模态框打开时；关闭后会恢复——这点基本可靠 - 真正的问题在内部：如果
.modal-body没设固定高度 +overflow-y: auto，长内容就会把整个模态框撑开，甚至溢出视口底部 - 推荐写法：
.modal-body { max-height: calc(100vh - 120px); overflow-y: auto; }（减去 header/footer 高度） - 避免在
.modal-content上设overflow，它会影响阴影和圆角渲染
JavaScript 打开全屏 Modal 前要确认 DOM 已挂载且 class 正确
用 JS 动态初始化时，如果 modal-dialog 上漏了 modal-fullscreen 类，或者在 show 之前没补上，就会按默认尺寸弹出——而且这个行为不可逆，除非隐藏再重开。
- 不要依赖 JS 添加 class 后立刻
new bootstrap.Modal(...).show()，DOM 渲染可能有微小延迟，稳妥做法是加个setTimeout(..., 0)或用queueMicrotask - 更干净的做法：把
modal-fullscreen写死在 HTML 里，JS 只负责触发；或者用shown.bs.modal事件补样式（但此时已渲染完毕，只能修修补补） - Vue/React 等框架中，务必等组件
mounted或useEffect完成、真实 DOM 存在后再初始化 Modal 实例
全屏 Modal 看似只是加个 class，但实际卡点都在细节：类加在哪一层、vh 在不同系统的表现、滚动容器的高度计算、以及 JS 初始化时机——这些地方错一个，就退回「看起来像全屏，实则处处别扭」的状态。
