Bootstrap元素右对齐问题：modal-body中a.btn如何右对齐

1. 为何input按钮和a按钮表现差异？ #

核心原因是两类元素的默认特性与Bootstrap样式组合后的行为不同：

• <input type="button">是替换元素，自带内在宽度限制，即便添加d-flex类转为flex容器，宽度仍由按钮内容决定，ml-auto（Bootstrap 5为ms-auto）能让它在父容器内右对齐，不会拉伸占满整宽。
• <a>是行内非替换元素，Bootstrap的.btn类给它设置了display: inline-block，但添加d-flex类后会转为块级flex容器，默认宽度会占满父容器可用空间，此时ml-auto仅让按钮内部内容右对齐，按钮本身却拉伸成整宽，看起来像未实现右对齐。

2. 通用右对齐方法（无需修改父元素、无内联样式） #

直接给按钮添加以下类组合，适配所有按钮类型：

<a class="btn btn-primary d-inline-flex ms-auto" href="#">右对齐按钮</a>
<input class="btn btn-primary d-inline-flex ms-auto" type="button" value="右对齐按钮">

• d-inline-flex：让元素保持行内flex容器特性，不会强制占满父容器宽度，同时保留flex布局能力。
• ms-auto（Bootstrap 4用ml-auto）：通过margin-left: auto实现元素在父容器内的右对齐。

若父元素不是flex容器，也可使用float-end（Bootstrap 4用float-right）类：

<a class="btn btn-primary float-end" href="#">右对齐按钮</a>

3. modal-body内右对齐a.btn的方案 #

直接给a按钮应用d-inline-flex ms-auto类组合，完全满足“无需修改父元素、无内联样式”的要求：

<div class="modal-body">
  <!-- 其他内容 -->
  <a class="btn btn-primary d-inline-flex ms-auto" href="#">确认操作</a>
</div>

如果使用Bootstrap 4，将ms-auto替换为ml-auto即可。

内容的提问来源于stack exchange，提问作者Sergey Zolotarev