bootstrap 5 的 .modal-footer 默认不固定在底部，因 .modal-content 为 flex-column 布局且 .modal-body 缺少 flex-grow: 1，导致高度由内容撑开；需设 .modal-content { height: 100% }、.modal-body { flex: 1 }、.modal-footer { flex-shrink: 0 } 实现真底部固定。
Bootstrap 5 的 .modal-footer 默认是“跟随内容高度浮动”的，不是固定在底部的——哪怕你拉长 .modal-body 或者模态框整体变高，.modal-footer 依然会紧贴内容末尾，不会钉死在模态框容器底部。
为什么 .modal-footer 看起来没“固定”
根本原因在于 Bootstrap 5 模态框默认使用的是 flex 布局（.modal-content 是 flex-column），但 .modal-body 没设 flex-grow: 1，所以整个高度由内容撑开，.modal-footer 自然随之下沉。它不是“定位失效”，而是设计如此——没有强制固定逻辑。
- 常见错误现象：
.modal-footer在长内容下被顶出视口、滚动时消失、和顶部标题距离忽大忽小 - 典型使用场景：表单模态框、带滚动列表的详情弹窗、需要始终可见“确认/取消”按钮的交互流程
- 直接加
position: absolute; bottom: 0;会破坏 flex 结构，导致遮挡、溢出或响应式错位
让 .modal-footer 真正钉在底部的 CSS 方案
最稳妥的方式是微调 flex 层级，不破坏 Bootstrap 原有结构：
.modal-content {
display: flex;
flex-direction: column;
height: 100%;
}
.modal-body {
flex: 1;
overflow-y: auto;
}
.modal-footer {
flex-shrink: 0;
}
- 必须给
.modal-content加height: 100%（否则flex: 1无参照） -
.modal-body的flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，能自动填满剩余空间 -
.modal-footer加flex-shrink: 0防止被压缩，配合border-top可视化分隔更清晰 - 该方案兼容
.modal-lg、.modal-sm和.modal-fullscreen
JavaScript 触发时需注意的高度陷阱
如果模态框通过 $('#myModal').modal('show') 打开，且内容动态加载（比如 AJAX 渲染表单），.modal-body 高度可能在渲染完成前为 0，导致 flex: 1 失效——footer 仍会“上浮”。
- 解决方法：在内容插入后手动触发重排，例如
myModalEl.offsetHeight（读取一个布局属性强制刷新） - 更稳妥做法：把上述 CSS 规则写死在样式表里，而不是依赖 JS 插入时机
- 避免在
shown.bs.modal回调里用setTimeout延迟修复——不可靠且难维护
全屏模态框（.modal-fullscreen）下的特殊处理
.modal-fullscreen 本身会覆盖整个视口，但它的 .modal-dialog 是 position: relative，内部 flex 行为不变。唯一要注意的是：
- 如果用了
.modal-fullscreen-md-down这类响应式全屏类，在中屏断点切换时，height: 100%可能被重置，建议补上媒体查询：
@media (max-width: 768px) {
.modal-fullscreen-md-down .modal-content {
height: 100%;
}
}
真正容易被忽略的点是：Bootstrap 5 的 .modal-footer 从不主动管理高度分配，它只负责“放按钮”。是否固定、如何固定、在什么尺寸下固定，全靠你对 flex 容器的理解和控制——没写 flex: 1，就永远没有“底部固定”这回事。
