Bootstrap 模态框(Modal)全屏模式下内容滚动条-Bootstrap教程-PHP中文网

bootstrap 5.2+ 才支持 modal-fullscreen，且必须带断点后缀（如 modal-fullscreen-md-down）；全屏需配合 .modal-body 的 max-height 和 overflow-y: auto 才能滚动；移动端 safari 需加 -webkit-overflow-scrolling: touch；背景跳动应改用 data-bs-backdrop="static" 避免 padding 补偿。

modal-fullscreen 类没生效？先确认 bootstrap 版本和断点写法

直接加 class="modal-dialog modal-fullscreen" 却没反应，大概率是版本或写法不对。bootstrap 5.2+ 才正式支持 modal-fullscreen 系列类，且它不是无条件全屏——必须带响应式断点后缀。例如：modal-fullscreen-md-down 表示“在视口宽度 ≤768px 时全屏”，modal-fullscreen-xl-down（5.3+ 支持）才接近“所有尺寸都全屏”。如果你用的是 5.2，modal-fullscreen（无后缀）会被忽略。

检查方式很简单：打开浏览器 DevTools，看 .modal-dialog 元素是否计算出了 width: 100% 和 margin: 0；如果没有，说明 CSS 规则根本没加载进来——可能是构建工具（如 Vite/Webpack）tree-shaking 掉了该类，或你引入的是精简版 CSS。

全屏后内容被截断、滚动条不出现？问题出在 `.modal-body`

全屏只解决容器尺寸和定位，滚动行为完全由 .modal-body 控制。它默认没有高度限制，内容一多就直接撑高整个视口，导致底部消失、滚动条压根不会渲染。

必须给 .modal-body 设 max-height: calc(100vh - 120px)（120px 是 header + footer 实际像素高度，按需调整）
必须配 overflow-y: auto，光有 max-height 不会触发滚动
避免用 height: 100% —— .modal-content 没设高度，百分比计算结果就是 0
移动端 Safari 要额外加 -webkit-overflow-scrolling: touch，否则惯性滚动失效

想自定义滚动条样式？目标必须是 `.modal-body`

写了 ::-webkit-scrollbar 却没效果？不是语法错，而是选错了作用对象。滚动条只出现在真正发生溢出的容器上，也就是 .modal-body 本身，不是 .modal 或 .modal-content。

WebKit 浏览器（Chrome/Safari/Edge）可用以下最小集合：

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

Firefox 完全不识别这套伪元素，scrollbar-width 和 scrollbar-color 支持有限且受系统策略压制，真要统一样式只能引入 simplebar 或 overlay-scrollbars 这类 JS 方案。

背景页面“向左一跳”？别动 `padding-right`，改用 `data-bs-backdrop="static"`

模态框打开瞬间页面横向偏移，是 Bootstrap 5 主动注入 padding-right 补偿滚动条消失所致。fixed 元素（如导航栏）没同步右移，就显得被吸向左。

最干净的解法不是覆盖 padding，而是绕过补偿逻辑：

在 modal 标签加 data-bs-backdrop="static"：禁用点击遮罩关闭，同时跳过 padding-right 注入，ESC 键仍可关闭
如果必须支持点击遮罩关闭，监听 show.bs.modal 事件，手动执行 document.body.style.overflow = 'hidden'，但**不添加 modal-open 类**，也**不设 padding-right**

滚动条是否出现、能否平滑滚动、是否影响 backdrop 点击，这些都不是孤立问题——它们全系于 .modal-body 的高度约束和 overflow 配置。漏掉任一环，就会在某个设备或浏览器上突然失效。