Modal底部按钮居中应给.modal-footer加justify-content-center类，因其是flex容器，text-center无效；多按钮等距用gap-2，一左一右用ms-auto，含提示文字需语义分离布局。
Modal底部按钮居中：别用text-center包整个.modal-footer
直接给.modal-footer加text-center看似合理，但基本无效——因为bootstrap 5.3+中.modal-footer默认是display: flex容器，而text-align对flex子项完全不起作用。按钮仍会左对齐，或被justify-content: space-between（如含关闭按钮时）强行挤到两端。
正确做法是控制.modal-footer自身的flex主轴对齐：
- 加
justify-content-center类：语义清晰、零配置、全版本兼容（5.3+原生支持） - 避免额外套一层
<div class="d-flex justify-content-center">：徒增DOM节点，还可能破坏.modal-footer自带的padding和border-bottom - 若项目卡在旧版Bootstrap（如5.0–5.2）且未启用该工具类，可临时补CSS：
.modal-footer { justify-content: center !important; }，但优先补全工具类或升级
多个按钮等距+居中：用gap代替mx-*
当底部有“取消”“保存”“删除”三个按钮时，仅居中不够，还需均匀间距。手动给每个按钮加me-2或mx-2会导致维护困难：按钮数量一变，所有外边距就得重调；响应式断点也难同步。
Bootstrap 5.4+已原生支持gap，直接生效：
- 给
.modal-footer加gap-2（或gap-3），按钮间自动产生统一间隙 - 需要响应式控制？用
gap-md-3 gap-lg-4：小屏紧凑、大屏宽松 - 注意前提：按钮不能被
align-items: flex-start干扰，默认align-items: center才能保证垂直对齐稳定
按钮一左一右（如取消+确认）：用ms-auto推右边那个
常见错误是给右侧按钮加float: right或margin-left: auto，但float在flex容器里失效，margin-left: auto在LTR页面中语义不清且易冲突。
ms-auto（margin-start auto）才是标准解法：
- 结构示例：
<div class="modal-footer d-flex"><button class="btn">取消</button><button class="btn btn-primary ms-auto">确认</button></div> -
ms-auto在LTR下等效于左外边距自动撑开，把按钮“顶”到最右，不依赖父容器宽度 - 小屏缩窄时依然可靠，不会换行错位；也不影响左侧按钮的自然基线对齐
- 别给两个按钮都加
flex-grow-1——那会让它们等宽，不是一左一右
含提示文字时的布局分离：文字和按钮组必须拆开
如果.modal-footer里既有操作按钮，又有“请确认后提交”这类提示文字，justify-content-center会把文字和按钮一起居中，视觉混乱。
必须做语义分离：
- 文字单独放一个
<p class="text-center mb-0">请确认后提交</p>，用text-center控制其对齐 - 按钮组用
<div class="d-flex justify-content-center gap-2">...</div>包裹，独立控制flex行为 - 两者之间加
mt-2或mb-2留白，避免紧贴 - 切勿用
text-center包住整个.modal-footer再塞按钮——flex容器+文本类混合使用，结果不可控
真正容易被忽略的是：Modal footer 的 flex 行为是隐式开启的，很多人改了 class 却没意识到自己正在覆盖一个已有 display 值；一旦混用 text-* 和 flex-* 类，对齐逻辑就立刻断裂。动手前先 inspect 元素，确认.modal-footer当前是否真是 flex 容器，比猜更省时间。
