bootstrap 5.2+需配合断点（如modal-fullscreen-md-down）才生效，直接写modal-fullscreen在5.2中无效；内容截断因.modal-body缺max-height和overflow-y:auto；手动覆盖width/margin会破坏transform居中、padding计算及移动端兼容性。
Bootstrap 5.2+ 可直接用 modal-fullscreen 类实现全屏模态框，但必须配合响应式断点（如 modal-fullscreen-md-down），否则无效；旧版本或特殊场景需手动覆盖样式，但极易引发滚动、居中、焦点等连锁问题。
为什么直接加 modal-fullscreen 没反应
Bootstrap 5.2 才正式引入 modal-fullscreen 系列类，且它不是无条件全屏——而是响应式断点控制。例如：
-
modal-fullscreen在所有断点生效（仅 5.3+ 支持，5.2 需写modal-fullscreen-xl-down模拟） -
modal-fullscreen-md-down表示“在md（768px）及更小屏幕下全屏”，桌面端窗口 ≤768px 时才会触发 - 如果写了
class="modal-dialog modal-fullscreen"却没变化，先检查bootstrap.min.js和 CSS 版本是否 ≥5.2 - 若用了构建工具（如 Webpack/Vite），确认未因 tree-shaking 漏掉
modal-fullscreen对应的 CSS 规则
全屏后内容被截断或滚动失效
根本原因不是模态框没“满屏”，而是 .modal-body 没获得可滚动上下文。Bootstrap 的 .modal-dialog 是 flex 容器，.modal-content 无高度约束，导致内容直接撑高整个视口，滚动条无处安放。
- 给
.modal-body加max-height: calc(100vh - 120px)（减去 header + footer 实际高度） - 必须配
overflow-y: auto，仅max-height不会触发滚动 - 移动端 Safari 要额外加
-webkit-overflow-scrolling: touch启用惯性滚动 - 避免给
.modal-body设height: 100%——父级.modal-content没设 height，结果就是 0 高度
手动覆盖 width/margin 为什么危险
很多人试过给 .modal-dialog 直接加 width: 100vw; margin: 0，这会破坏 Bootstrap 内部三重定位逻辑：
-
transform: translate(-50%, -50%)仍按原始尺寸计算偏移，导致模态框实际位置偏右偏下 -
.modal-content的 padding 依赖.modal-dialog的max-width计算，硬设 width 会让内边距塌缩 - 移动端 Safari 下
100vw会因地址栏显示/隐藏抖动，而modal-fullscreen内部用了width: -webkit-fill-available兜底 - 若父容器（如
body或某个 wrapper）有overflow: hidden或固定高度，也会压制全屏表现，需一并排查
全屏模态框的真实代价：不只是样式
全屏模态框在交互层比视觉层更难收口。比如：
- 点击 backdrop 默认关闭，但全屏搜索等场景常需
data-backdrop="static"，否则用户点空白就退出 - 移动端软键盘弹出时，fixed 定位的
.modal会被顶起，尤其 iOS Safari，得靠viewport-fit=cover+min-height: 100vh+ focus 时强制 body 高度兜底 - 富文本编辑器、日期选择器等组件初始化时可能动态提
z-index，盖住.modal-backdrop，导致点背景无法关闭 - Esc 键默认关闭模态框，但全屏下用户可能正用它操作内部表单，得监听
keydown过滤或临时禁用
真正麻烦的从来不是“怎么让它变全屏”，而是“变全屏之后，各种系统行为和第三方组件怎么不跟它打架”。别在没真机连测前就认为它跑通了。
