应使用 Bootstrap 4 内置的 .modal-footer 容器实现模态框底部按钮固定，而非 position: fixed；若需自定义吸底，须在 .modal-content（设 position: relative）内用 position: absolute + bottom: 0，并手动处理安全区适配。
为什么不能直接用 position: fixed 在模态框内部
Bootstrap 4 的 .modal 本身已使用 position: fixed 覆盖全屏，其子元素若再设 position: fixed，会脱离模态框的定位上下文，变成相对于视口定位——结果就是按钮“飞”到整个页面底部，而不是模态框底部。
真正需要的是在模态框内容区（.modal-content）内做局部固定，且不破坏 Bootstrap 的滚动逻辑和响应式结构。
常见错误现象包括：按钮被截断、随内容滚动、在移动端错位、点击区域不可点。
.modal-footer 就是专为底部按钮设计的语义容器
Bootstrap 4 已内置 .modal-footer 类，它默认表现为 flex 布局、靠右对齐、带 padding 和 border-top，且天然位于 .modal-content 最底部。
立即学习“前端免费学习笔记（深入）”；
关键不是“怎么固定”，而是“别绕开它”。只要把按钮放进 .modal-footer，就自动获得底部定位语义和样式保障：
- 它不会随
.modal-body内容滚动而移动 - 在窄屏下自动换行或收缩，保持可操作性
- 与
.modal-header形成视觉闭环，符合用户预期
示例结构（必须按此嵌套）：
<div class="modal-content">
<div class="modal-header">...</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">确认</button>
</div>
</div>需要“吸底”但又不想用 .modal-footer？用 position: absolute + relative 父容器
极少数场景（比如 footer 需要覆盖 body 滚动内容、或自定义高度/阴影），你确实要手动吸底。此时必须满足两个条件：
-
.modal-content必须显式设position: relative - 按钮容器设
position: absolute; bottom: 0; left: 0; width: 100%，并置于.modal-content内部最末尾
注意：不能加在 .modal 或 .modal-dialog 上——它们的高度由内容撑开，无法保证“底部”位置稳定；也不能忽略 z-index，否则可能被 .modal-header 遮挡。
简短 CSS 示例：
.modal-content {
position: relative;
}
.custom-sticky-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
background: white;
border-top: 1px solid #dee2e6;
}移动端适配和安全区避让（容易被忽略）
在 iOS Safari 或安卓刘海屏上，.modal-footer 可能被系统手势条遮住。Bootstrap 4 本身不支持 env(safe-area-inset-bottom)，所以必须手动补丁：
- 给
.modal-footer加padding-bottom: env(safe-area-inset-bottom) - 同时加
margin-bottom: calc(-1 * env(safe-area-inset-bottom))防止额外留白撑高模态框 - 确保父级
.modal-content没有overflow: hidden，否则安全区 padding 会被裁掉
这是纯 CSS 方案里最易漏的一环——没加这行，iPhone 用户很可能点不到“确认”按钮。
