Bootstrap 模态框内容过长滚动设置 ModalDialogScrollable-Bootstrap教程-PHP中文网

加了 modal-dialog-scrollable 还不滚动，是因为该类仅启用滚动逻辑，但未提供可滚动的高度边界；需确保 .modal-body 有明确 max-height（如 60vh）和 overflow-y: auto，且父容器未用 height: 100% 或 flex: 1 破坏高度继承。

bootstrap 模态框内容过长滚动设置 modaldialogscrollable

为什么加了 `modal-dialog-scrollable` 还不滚动？

不是 class 没生效，而是它只负责“启用滚动逻辑”，不负责“提供可滚动的高度边界”。modal-dialog-scrollable 在 Bootstrap 5.2+ 中会自动给 .modal-body 加 max-height: 60vh 和 overflow-y: auto，但这个高度计算极易被破坏：

父级 .modal-content 或 .modal-dialog 被设了 height: 100% 或 flex: 1，导致子元素无法继承有效高度
你在 .modal-body 里用了 display: flex; flex-direction: column 却没给子容器设 flex: 1，高度塌陷
嵌套了 position: absolute 元素，脱离文档流，干扰 height 计算
在移动端 Safari 上，缺 -webkit-overflow-scrolling: touch 会导致滚动卡顿或失效

`modal-dialog-scrollable` 和手动设 `max-height` 冲突吗？

不冲突，但优先级要理清。Bootstrap 的 modal-dialog-scrollable 是 CSS 驱动的，它内部用的是 max-height: calc(100vh - 1rem)，这个值在小屏幕（比如 iPhone 竖屏）下可能不够，内容仍会溢出。

建议显式覆盖：给 .modal-body 加 style="max-height: 70vh; overflow-y: auto;"，比依赖默认更可控
若用 SCSS 自定义主题，别直接改 .modal-dialog-scrollable 的 max-height，而是在 .modal-body 上加 @include media-breakpoint-down(md) { max-height: 60vh; }
绝对不要给 .modal-dialog 或 .modal-content 设 height ——会破坏垂直居中和响应式缩放

滚动后点不到 backdrop 关闭模态框？

这是 z-index 错乱的典型副作用，不是滚动本身的问题。当 .modal-body 内部某个元素（比如富文本编辑器、下拉菜单、autofocus 输入框）获得焦点，JS 可能临时提升它的 z-index，盖住 .modal-backdrop（默认 z-index: 1040）。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

检查是否对 .modal-body 或其子元素写了 position: relative + z-index，删掉
确保所有第三方组件初始化后没偷偷改 z-index，尤其注意 vue-select、quill、flatpickr 类库
在 shown.bs.modal 事件里做兜底：$('#myModal').on('shown.bs.modal', () => { $('.modal-body *').css('z-index', 'auto'); });