Bootstrap 5 全屏模态框应使用 modal-fullscreen 类于 modal-dialog 元素，禁用手动 width/margin 覆盖；响应式可用 modal-fullscreen-lg-down 等变体；父容器 overflow 或高度限制、错误覆盖 transform 会导致偏移或滚动异常；移动端需用 -webkit-fill-available 和 safe-area-inset-top 适配；Bootstrap 4 需复刻 CSS 规则并重置 transform。
Bootstrap 5 模态框如何强制全屏（含 modal-fullscreen 兼容性说明）
Bootstrap 5 原生支持全屏模态框，但必须用对类名，且不能和 modal-dialog 的 width 或 margin 手动覆盖混用——否则会冲突、留白、滚动异常。
- 正确方式是直接加
modal-fullscreen类到modal-dialog元素上，例如：<div class="modal-dialog modal-fullscreen"> <li>该类默认在所有断点生效；如只需某断点全屏（比如仅在 lg 及以上），用 <code>modal-fullscreen-lg-down等响应式变体 - 手动设
width: 100vw+margin: 0是错的：它绕过 Bootstrap 的尺寸重置逻辑，会导致modal-content内边距失效、关闭按钮错位、键盘焦点异常 - 如果用了
modal-fullscreen还没全屏，大概率是父容器（比如body或某个 wrapper）设置了overflow: hidden或固定高度，需检查 -
width: 100%+margin: 0后，模态框虽宽了，但transform: translate(-50%, -50%)仍按原尺寸计算偏移，导致实际位置偏右偏下 - 某些版本中，
modal-content的padding依赖modal-dialog的max-width计算，硬设width会让内边距塌缩 - 移动端 Safari 下，手动设
width: 100vw可能因地址栏显示/隐藏导致宽度抖动，而modal-fullscreen内部用了width: -webkit-fill-available兜底 - 给
modal-content加height: 100vh和overflow: hidden，防止内容撑高后出现双滚动条 - 如果顶部被系统状态栏遮住（iOS Safari），加
padding-top: env(safe-area-inset-top)到modal-header，而非改modal-dialog的 margin - 慎用
!important覆盖modal-dialog的margin：它会干扰modal-backdrop的 z-index 层级，导致点击背景无法关闭 - 复制 Bootstrap 5 的
.modal-fullscreenCSS 规则（重点是width: 100% !important、max-width: none、margin: 0、transform: none）到项目样式中 - 必须同时重置
modal-dialog的transform，否则动画定位错误；4.x 默认有transform: translate(0)，不设为none就会留白 - 避免用
position: fixed+top/left/right/bottom: 0：它会让模态框脱离 Bootstrap 的 focus trap 机制，键盘 Tab 会跳出框外
为什么改 modal-dialog 的 width 和 margin 会出问题
Bootstrap 的 modal-dialog 默认有 max-width、margin、transform 三重控制，手动覆盖其中一两项会打破居中逻辑和动画锚点。
自定义全屏尺寸（比如去掉顶部状态栏遮挡）
若需真正“贴顶贴底”（比如 WebApp 场景），不能只靠 modal-fullscreen，得微调 modal-content 的 height 和 overflow。
Bootstrap 4 怎么办（无 modal-fullscreen）
Bootstrap 4 没内置全屏类，但可安全复刻其逻辑，别自己写 width/margin。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是怎么拉满宽度，而是全屏后内容适配、滚动行为、焦点管理、Safari 安全区这些隐性依赖。改一个 width 很快，修完所有副作用要花三倍时间。
