modal底部按钮移动端右对齐应使用ms-auto推右确认按钮，而非justify-content-end（会导致按钮紧贴无间距）；若需取消左、确定右且间距均匀，应包裹d-flex justify-content-between w-100并加flex-shrink-0防压缩。
Modal底部按钮在移动端默认左对齐，怎么改成右对齐？
Bootstrap 5 的 modal-footer 默认用 justify-content: flex-start，按钮从左往右排——这在桌面端没问题，但手机端用户习惯「确认在右、取消在左」，而默认顺序是反的。改法不靠重写 CSS，而是用内置工具类。
- 给
modal-footer加justify-content-end（右对齐），但会导致两个按钮紧贴右边、间距消失 - 更稳妥的做法：保留默认
justify-content-start，用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>
想让「取消」在左、「确定」在右，但又保持间距均匀？
单纯靠 ms-auto 会让两个按钮间距不均，尤其当按钮文字长度差异大时。这时需要明确控制弹性布局行为。
- 去掉
ms-auto，改用modal-footer内部包裹一个div，并设为d-flex justify-content-between - 确保两个按钮都为
flex-shrink-0（防止小屏下被压缩变形） - 避免用
text-end或float-end——它们会破坏 flex 布局流，且在 modal footer 中可能触发重绘异常 - 示例：
<div class="modal-footer"> <div class="d-flex justify-content-between w-100"> <button type="button" class="btn btn-secondary flex-shrink-0">取消</button> <button type="button" class="btn btn-primary flex-shrink-0">确定</button> </div> </div>
为什么加了 justify-content-end 后按钮堆在一起？
因为 modal-footer 默认是 display: flex，但子元素没有设置 margin 或 gap，所有按钮变成连续排列。Bootstrap 5.3+ 支持 gap，但旧版本不兼容。
- 优先用
gap（如gap-2）代替手动加me-2——更语义化、响应式友好 - 如果项目还在用 Bootstrap 5.2 或更早，
gap在部分安卓 WebView 中失效，此时必须退回到me-2+ms-auto组合 - 切记：不要给按钮加
float类，modal-footer的 flex 容器会忽略 float 行为
按钮顺序在 RTL（如阿拉伯语）环境下还适用吗？
不适用。RTL 模式下，「确认」应位于左侧，「取消」在右侧，而上述方案是 LTR 预设逻辑。
- 检测
dir="rtl"时，把justify-content-between换成justify-content-between flex-row-reverse - 或者更简单：用
class="text-start text-md-end"控制对齐方向，但仅适用于单按钮场景；双按钮仍需 flex 控制顺序 - 真正健壮的做法是用 JS 动态判断
document.dir，然后切换容器类名——多数项目其实不需要支持 RTL，别过早优化
text-end 不生效」，根源在于没意识到 modal-footer 是 flex 容器，得用 flex 工具类而非文本对齐类。
