modal底部按钮移动端应右对齐确认按钮，正确做法是用ms-auto推单个确认按钮至最右，或justify-content-end配合me-2处理多个按钮，同时需增大移动端按钮点击区域至min-height:44px并测试真机触控。
Modal底部按钮默认从左到右排列，移动端需要右对齐确认按钮
Bootstrap 5 的 modal-footer 默认用 justify-content: flex-start，导致「取消」「确定」都靠左，用户在手机上容易点错——尤其当「确定」是主要操作时，它应该在最右侧、最易触达的位置。这不是视觉问题，是交互安全问题。
- 别直接给
.btn加float-right（Bootstrap 5 已移除该类） - 别用
text-align: right，它只影响内联元素，而按钮是display: inline-flex，无效 - 正确做法是控制
.modal-footer的 Flex 布局方向和对齐方式
用 justify-content-end 或 ms-auto 控制按钮顺序
Bootstrap 5 提供了响应式间距和 Flex 工具类，比写自定义 CSS 更可靠、更轻量。
- 如果两个按钮：把「确定」按钮加上
ms-auto，它会自动推到最右边，「取消」留在左边 —— 这是最小侵入的改法 - 如果三个及以上按钮（比如「取消」「重置」「确认」），给整个
.modal-footer加justify-content-end，再用me-2给中间按钮加右间距 - 注意：不要同时用
justify-content-end和ms-auto，会导致布局冲突
<div class="modal-footer"> <button type="button" class="btn btn-secondary">取消</button> <button type="button" class="btn btn-primary ms-auto">确认</button> </div>
移动端优先时，避免用 col- 栅格控制按钮宽度
有人尝试用 col-6 给每个按钮分配宽度，结果在小屏上按钮文字换行、高度不一致，反而更难点击。栅格系统在 footer 里不是为按钮设计的。
-
col-类会让按钮变成flex: 0 0 auto，失去弹性，且无法响应文字长度变化 - 按钮宽度应由内容自然撑开，靠
px-4 py-2控制内边距统一手感 - 真要限制宽度（比如防止长文案撑爆），用
max-width: 120px+text-truncate，而不是栅格
iOS Safari 下按钮点击区域太小，必须扩大可触控范围
即使排列对了，iPhone 上手指点「确认」经常失焦——因为默认 btn 的 padding 在小屏下不到 44px 高度，不符合苹果最小触控标准。
- 在媒体查询中单独提升移动端按钮尺寸：
@media (max-width: 576px) { .modal-footer .btn { padding: 0.75rem 1.5rem; min-height: 44px; } } - 别只改
font-size，那会拉高行高但不增加点击热区 - 测试时用真机开启「辅助功能 → 辅助触控」看高亮区域是否完整覆盖按钮
按钮顺序只是表象，真正卡住体验的是触控热区和视觉动线。改完排列后，务必在 iPhone SE 和 Android 小屏机上连点 5 次「确认」，看有没有一次失焦——有，就说明 min-height 或 padding 还不够。
