modal-fullscreen 类单独使用不生效，必须搭配断点后缀（如 modal-fullscreen-lg-down）才触发全屏样式；其本身无媒体查询，仅作占位符，需按设备需求选用对应变体并处理滚动与兼容性问题。
Bootstrap 5 的 modal-fullscreen 类为什么没生效？
因为 Bootstrap 5 默认只在特定断点启用全屏模态框，modal-fullscreen 单独加不生效是常态。它必须配合断点后缀（如 modal-fullscreen-lg-down）才起作用，否则 CSS 规则压根不会匹配。
常见错误现象：modal-fullscreen 加了但模态框还是固定宽度、顶部留白、滚动条还在；检查元素发现 .modal-dialog 没有应用 width: 100vw 和 height: 100vh 等样式。
-
modal-fullscreen是基础类，但本身不带媒体查询，纯属占位符 - 真正生效的是带断点的变体：例如
modal-fullscreen-sm-down（小屏及以下全屏）、modal-fullscreen-lg-down（大屏及以下全屏） - Bootstrap 5.3+ 新增了
modal-fullscreen-xl-down和modal-fullscreen-xxl-down，按需选用 - 若想「所有屏幕都全屏」，用
modal-fullscreen-sm-down最稳妥（因sm是最小断点，等价于无条件启用）
如何让模态框在桌面端也全屏？
默认的 modal-fullscreen-md-down 在 >=992px（lg 起点）就退回到普通尺寸，桌面用户看到的仍是居中卡片。要突破这个限制，得手动覆盖或换用更高断点后缀。
- 优先尝试
modal-fullscreen-lg-down：覆盖到 1199px，适合多数桌面显示器 - 若需 1200px+ 也全屏，改用
modal-fullscreen-xl-down（≥1400px 才退出）或modal-fullscreen-xxl-down（≥1600px） - 不推荐直接写
style="width:100vw;height:100vh"—— 会破坏 Bootstrap 的响应式逻辑，且可能遮挡 navbar 或 footer - 如果项目已用 Sass，可重定义
$modal-fullscreen-width变量，但需确保编译时加载顺序正确
modal-fullscreen 下内容溢出和滚动怎么处理？
全屏后内容高度常超视口，但 Bootstrap 默认把 .modal-body 设为 overflow: hidden，导致文字截断、按钮不可见。这不是 bug，是设计选择 —— 它期望你主动控制滚动区域。
- 最简方案：给
.modal-body加style="max-height: calc(100vh - 180px); overflow-y: auto"（180px ≈ header + footer 高度） - 更健壮的做法：用 Flex 布局撑满，例如给
.modal-content加display: flex; flex-direction: column; height: 100%，再给.modal-body加flex: 1; overflow-y: auto - 避免对
.modal-dialog直接设overflow—— 它会干扰 backdrop 点击关闭逻辑 - 移动端要注意
-webkit-overflow-scrolling: touch，否则 iOS 滚动卡顿
自定义全屏模态框时容易忽略的兼容点
全屏模态框在 Safari、旧版 Edge 或嵌入 iframe 的场景下行为差异明显，很多问题只在真机或特定容器里暴露。
- Safari 对
vh单位支持不稳定（尤其地址栏收放时），建议用100dvh替代（Chrome 105+/Safari 16.4+ 支持），回退方案用 JS 动态设style.height = window.innerHeight + 'px' - 如果模态框内含
video或canvas，全屏后可能被浏览器安全策略限制自动播放或渲染，需显式加playsinline、webkit-playsinline - 在
position: fixed导航栏下方弹出时，modal-fullscreen仍会从 viewport 顶边开始，需额外给.modal-dialog加top: var(--bs-navbar-height, 0)并确保 CSS 变量已定义 - 别忘了测试 Esc 键和点击 backdrop 关闭行为 —— 全屏后焦点管理更容易出错
实际项目里，modal-fullscreen-sm-down 加手动滚动控制能解决 90% 场景；剩下那 10%，往往卡在 Safari 的 dvh 兼容性或 iframe 的 sandbox 限制上，得单独补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
