Modal底部按钮移动端需“取消｜确认”右对齐且等宽，应使用d-flex+justify-content-between或flex-fill实现布局，同时确保确认按钮正确添加data-bs-dismiss="modal"属性以触发关闭。
Modal底部按钮默认从左到右排列，但移动端需要「取消｜确认」右对齐
Bootstrap 默认把 modal-footer 里的按钮按 DOM 顺序从左到右排，btn-secondary 在前就靠左，btn-primary 在后就靠右——这在桌面端没问题，但手机上用户习惯「右滑确认、左滑取消」，视觉动线要求「取消」在左、「确认」在右，且两个按钮需等宽、紧凑、对齐右边界。
直接用 Bootstrap 5 的 justify-content- 工具类就能调序
别写额外 CSS，Bootstrap 5 内置了弹性布局工具。关键是把按钮包裹进 div class="d-flex"，再加对齐控制：
<div class="modal-footer">
<div class="d-flex justify-content-between w-100">
<button type="button" class="btn btn-secondary">取消</button>
<button type="button" class="btn btn-primary">确认</button>
</div>
</div>
-
justify-content-between让左右按钮自动撑满，取消左贴、确认右贴 - 去掉默认的
text-end或ms-auto，它们会干扰 flex 布局 - 不要用
float-end，它在 flex 容器里失效，且不响应式
按钮宽度不一致？用 flex-fill 强制等宽
如果设计稿或产品要求两个按钮严格等宽（比如各占 48%），justify-content-between 不够用，此时改用：
<div class="d-flex gap-2 w-100"> <button type="button" class="btn btn-secondary flex-fill">取消</button> <button type="button" class="btn btn-primary flex-fill">确认</button> </div>
-
flex-fill让按钮均分父容器剩余空间，比写col-6更可靠（避免栅格嵌套冲突） -
gap-2替代mx-1控制间距，语义清晰且支持响应式断点（如gap-md-3） - 注意：iOS Safari 对
flex-fill支持完好，但旧版 Android WebView 可能需加min-width: 0—— 实际项目中极少遇到，先不加
点击确认后 Modal 不关闭？检查 data-bs-dismiss 是否写错
常见错误是复制粘贴时漏掉 bs，写成 data-dismiss="modal" —— Bootstrap 5 已弃用，必须用 data-bs-dismiss：
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">确认</button>
- 没写这个属性，点击后 JS 不触发
hide()，用户以为卡死 - 如果业务逻辑需要异步校验（比如提交表单），就别加
data-bs-dismiss，改用 JS 手动调myModal.hide() - 用
data-bs-dismiss时，确保按钮不在form内且没type="submit"，否则会触发表单提交打断关闭流程
data-bs-dismiss 拼写和按钮类型，结果测试时发现点不动——顺序调对了，但根本关不了。 
