Modal底部按钮在移动端需实现“取消｜确认”右对齐且等宽布局，推荐使用d-flex搭配justify-content-between或flex-fill进行弹性布局，同时务必为确认按钮添加正确的data-bs-dismiss="modal"属性，确保点击后正常触发弹窗关闭。
先看一个典型的移动端交互场景：弹窗底部的按钮布局，用户普遍习惯右手操作，确认键放在右侧更符合直觉，取消键置于左侧。然而Bootstrap默认的Modal底部按钮采用从左到右排列——若按DOM顺序书写，btn-secondary在左、btn-primary在右，桌面端显示尚可，但在手机屏幕上却显得别扭。理想的视觉动线应当是“取消”居左、“确认”居右，两个按钮还需等宽、紧凑，并紧贴右边界对齐。这本质上是一个交互细节的打磨，而非单纯的样式修饰。
直接用Bootstrap 5的弹性布局工具调序，不用写额外CSS
Bootstrap 5内置的弹性布局工具完全能够胜任按钮排列调整，无需额外编写CSS代码。核心思路是将按钮包裹进一个d-flex容器，再通过对齐方式控制布局：
justify-content-between让左右按钮自动撑满父容器，取消键左对齐、确认键右对齐，间距均匀分布。- 务必移除默认的
text-end或ms-auto，它们会干扰flex布局的正常渲染。 - 避免使用
float-end，它在flex容器中完全失效，且不具备响应式能力。
按钮宽度不一致？用flex-fill强制等宽
如果设计稿要求两个按钮严格等宽（例如各占48%），justify-content-between 可能无法满足——因为按钮宽度由内容撑开，难以保证完全一致。此时应改用 flex-fill 实现等分：
flex-fill让按钮自动均分父容器剩余空间，相比写col-6更可靠——能避免栅格嵌套带来的样式冲突，且语义更清晰。gap-2替代mx-1控制按钮间距，同时支持响应式断点（如gap-md-3），灵活度更高。- 注意：iOS Safari 对
flex-fill兼容性良好，旧版Android WebView 可能需要补充min-width: 0，但实际项目中极少遇到，暂时不加也不影响。
点击确认后Modal不关闭？检查data-bs-dismiss是否写错
这是最容易踩坑的细节。很多人把按钮位置调整正确，但测试时发现点击确认后弹窗毫无反应，还以为是样式出了问题。其实根源很简单：data-bs-dismiss 属性拼写有误。
常见错误是复制粘贴时漏掉 bs，写成 data-dismiss="modal"——Bootstrap 5 已弃用旧写法，必须使用 data-bs-dismiss：
- 缺少该属性时，点击后JS无法触发
hide()方法，用户会误以为弹窗卡死。 - 如果业务逻辑需要异步校验（如提交表单前验证数据），则不应添加
data-bs-dismiss，改用JS手动调用myModal.hide()更可控。 - 使用
data-bs-dismiss时，请确保按钮不在form内，或没有type="submit"，否则会触发表单提交，打断关闭流程。
移动端按钮顺序调整并非单纯的样式问题，而是交互路径的关键环节。很多人只关注位置调换，却忽略了 data-bs-dismiss 的拼写和按钮类型，导致测试时点击无响应——顺序虽然对了，但弹窗根本关不掉。这个细节值得多花一分钟仔细检查。
