Bootstrap 模态框(Modal)底部固定操作栏样式-Bootstrap教程-PHP中文网

Modal中fixed-bottom失效，因其使元素脱离.modal-dialog相对定位上下文而相对于视口定位，导致错位悬空；正确方案是用modal-footer配合flex布局或手动添加position: sticky至.modal-body。

bootstrap 模态框(modal)底部固定操作栏样式

Modal 底部操作栏不能直接套用 fixed-bottom，它会脱离模态框容器、错位甚至被裁剪；正确做法是用 modal-footer + 布局类控制位置与间距，必要时手动加 position: sticky。

为什么 `fixed-bottom` 在 Modal 里失效

Modal 的 .modal-dialog 默认是 position: relative，且常设 overflow: hidden 或 max-height。一旦子元素（比如按钮栏）用了 fixed-bottom，它就脱离了这个相对定位上下文，转而相对于视口定位——结果就是：按钮飘到浏览器底部，而不是 Modal 底部；如果 Modal 高度小于视口，按钮还会“悬空”。更糟的是，某些 Bootstrap 版本（5.3+）已移除 fixed-bottom 工具类，写了也白写。

fixed-bottom 要求父容器无 overflow: hidden、无 transform、且自身不处于 position: relative 的限制中——Modal 几乎全占了这些雷区
Modal 内容可滚动时，fixed-bottom 按钮会固定在屏幕底，但 Modal 本身可能只占半屏，用户根本看不到它
在 iOS Safari 中，fixed 元素在 transform-包裹的 Modal（如 fade 动画）里大概率被裁掉

`modal-footer` 是默认解，但要注意高度和留白

Bootstrap 的 .modal-footer 本意就是承载底部操作按钮，它天然位于 Modal 底部、随 Modal 滚动、不脱离文档流。但它不是“固定”的——当 Modal 内容高、需滚动时，footer 会跟着往上滑。如果你要的是“始终可见”，就得配合布局微调：

给 .modal-content 加 flex-column 和 h-100，再让 .modal-body 设为 flex-grow-1 overflow-auto，这样 .modal-footer 就能钉在 flex 容器底部
避免给 .modal-footer 加 mt-auto——它会让 footer 浮在中间，尤其内容短时
用 pb-3 或 py-3 控制按钮内边距，别只依赖 btn-block 或 btn-lg，移动端手指点击区域至少要 min-height: 48px
如果按钮文字多或带图标，加 d-flex flex-wrap 和 gap-2 防止换行错位

真要“滚动中始终贴底”？手动加 `position: sticky`

当 Modal 内容很长、你又希望操作栏一直露在视口底部（类似原生 App 底部工具栏），sticky 是唯一靠谱选择。但 Modal 的 DOM 结构决定了它必须满足几个硬条件：

VPS Bootstrap

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

下载

把操作栏放在 .modal-body 最末尾（不是 .modal-footer 外部），并确保它是 .modal-body 的**最后一个子元素**
给 .modal-body 加 position: -webkit-sticky; position: sticky; 和 bottom: 0 —— 注意：不是给按钮栏加，是给它的父容器加
.modal-body 必须有明确高度约束，比如 max-height: calc(100vh - 200px)（减去 header/footer 预估高度），否则 sticky 不触发
Safari 需要 -webkit- 前缀，且 .modal-body 父级（即 .modal-content）不能有 transform 或 filter

示例结构：

<div class="modal-content">
  <div class="modal-header">...</div>
  <div class="modal-body" style="max-height: calc(100vh - 200px); position: -webkit-sticky; position: sticky; bottom: 0;">
    <!-- 正常内容 -->
    <div class="d-grid gap-2 pt-3">
      <button class="btn btn-primary">确认</button>
      <button class="btn btn-secondary">取消</button>
    </div>
  </div>
</div>