Bootstrap 如何为表单中的右浮动按钮添加水平间距

现有问题 #

你需要在表单区域右侧放置两个按钮，给按钮添加float-right类实现右浮动效果后，两个按钮紧贴没有水平间距，影响交互辨识度。
你当前的实现代码如下，注意第一个按钮的图标闭合标签存在笔误，会导致图标渲染异常：

<div class="form-group row">
   <div class="col-lg-12">
     <button id="btn-add" class="btn btn-primary float-right" type="button">
             <i class="fa fa-plus"></i>Add place
     </button>
    <button id="btn-add-file" class="btn btn-primary float-right" type="button">
             <i class="fa fa-plus"></i>Upload CSV
    </button>
   </div>
</div>

解决方案 #

方案1：最小改动直接加间距 #

这是最快的改法，不需要调整原有布局逻辑。
因为两个按钮都加了float-right，HTML里先写的btn-add会排在最右侧，后写的btn-add-file在它左侧，两者的相邻边刚好贴合。只需要给靠左的btn-add-file加一个右侧外边距类，就能留出水平间距。
调整后的代码：

<div class="form-group row">
   <div class="col-lg-12">
     <button id="btn-add" class="btn btn-primary float-right" type="button">
             <i class="fa fa-plus"></i> Add place
     </button>
    <button id="btn-add-file" class="btn btn-primary float-right me-2" type="button">
             <i class="fa fa-plus"></i> Upload CSV
    </button>
   </div>
</div>

注意：me-2是Bootstrap 5的外边距类，对应2倍单位的右外边距，间距大小可以按需换成me-1/me-3等；如果用的是Bootstrap 4及更早版本，把me-2换成mr-2即可。

方案2：推荐使用Flex布局优化 #

浮动布局本身容易带来高度塌陷、对齐不灵活的副作用，现在更推荐用Flex布局实现右对齐，不需要手动处理浮动的兼容问题，间距设置也更直观。
改动逻辑：

• 给包裹按钮的父div加d-flex justify-content-end类，直接实现内部元素靠右对齐
• 移除两个按钮上的float-right类
• 按需设置间距即可
  调整后的代码：

<div class="form-group row">
   <div class="col-lg-12 d-flex justify-content-end gap-2">
     <button id="btn-add-file" class="btn btn-primary" type="button">
             <i class="fa fa-plus"></i> Upload CSV
    </button>
     <button id="btn-add" class="btn btn-primary" type="button">
             <i class="fa fa-plus"></i> Add place
     </button>
   </div>
</div>

说明：Flex布局下元素按HTML书写顺序从左到右排列，这里调整了两个按钮的代码顺序，是为了保持原有「Add place在最右侧、Upload CSV在左侧」的视觉效果。如果不想修改DOM顺序，也可以给按钮加order属性调整排列顺序；Bootstrap 5的gap-2类可以直接给Flex容器内的元素统一留间距，不需要单独给按钮加外边距，版本兼容的话优先用这个写法。

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