Bootstrap 5 中 modal-dialog-bottom-center 类不存在，需用 flex 布局配合 mt-auto 实现底部居中对齐，同时注意 max-height 限制、移动端兼容性及 DOM 渲染时机。
Bootstrap 5 中 modal-dialog-bottom-center 类不存在
Bootstrap 官方 CSS 工具类里没有 modal-dialog-bottom-center，也没提供类似语义的内置类。想让模态框停在视口底部（而非默认顶部或居中），必须手动干预布局逻辑，不能靠“加个类就完事”。
用 flex + margin-top: auto 实现底部对齐
最稳定的方式是利用 Bootstrap 5 的 .modal 默认已设为 display: flex，再通过子元素 .modal-dialog 的自动外边距实现底部吸附：
- 给
.modal-dialog添加class="modal-dialog d-flex w-100"（确保宽度撑满） - 给
.modal-content添加class="mt-auto"—— 这会把内容推到底部，前提是父容器.modal-dialog是 flex 容器且高度足够 - 如果模态框内容少，
mt-auto有效；但如果内容高过视口，它会溢出底部，此时需限制最大高度：max-height: 80vh; overflow-y: auto; - 别在
.modal上加align-items: flex-end，这会让整个.modal-dialog贴底但水平不居中，还得额外补justify-content: center
动态内容下 bottom: 0 不可靠
有人试过给 .modal-dialog 加 position: absolute; bottom: 0; left: 50%; transform: translateX(-50%)，但问题明显：
-
.modal默认是position: fixed，其子元素设absolute后参考系变成.modal自身，不是视口，容易错位 - 动画（
.fade）过程中transform和bottom冲突，导致弹出时跳动 - 移动端 Safari 对 fixed + absolute 混合定位渲染不稳定，尤其键盘弹起后视口高度变化，
bottom: 0会卡在错误位置 - 若页面本身有滚动，
bottom: 0是相对 viewport，不是相对文档流，用户滚动后模态框会“悬空”
React-Bootstrap 或动态创建时要注意 DOM 时机
用 react-bootstrap 或 JS 动态插入模态框时，mt-auto 可能不生效，因为初始渲染时 .modal-dialog 还没被设为 flex 容器（某些主题或封装层会覆盖 display）：
- 检查 computed styles，确认
.modal-dialog的display确实是flex，不是block - 如果被重写，直接在组件上加
style={{ display: 'flex' }}或自定义 class 强制display: flex !important - 不要依赖
shown.bs.modal后再 JS 改margin-top，既绕路又难维护，也容易和 fade 动画冲突 - 真要 JS 控制，用
getBoundingClientRect()算视口底部距离，比$(window).height()更准，尤其在 iOS 键盘唤起后
底部居中的关键不在“怎么贴底”，而在“贴底时是否仍保持水平居中、是否适配内容高度变化、是否兼容动画与移动端视口重算”。mt-auto 是最轻量且符合 Bootstrap 布局哲学的做法，但得确保 flex 上下文没被意外破坏。
