【问题标题】:bootstrap - add horiztonal space beetwen two buttons with float rightbootstrap - 在两个按钮之间添加水平空间,向右浮动
【发布时间】:2021-02-09 18:56:56
【问题描述】:

我想在表单的右侧有 2 个按钮,但是当我放置它们时,它们之间没有空格

我有这个

  <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"></iAdd 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>

这就是结果

【问题讨论】:

  • 这样的浮动元素没有应用边距。手动添加边距或填充以分离它们

标签: css button space


【解决方案1】:

由于您使用的是引导程序,因此您只需将类 ml-1(或 ml-2 等)添加到“添加地点”按钮即可。类似:

<button id="btn-add" class="btn btn-primary float-right ml-1" type="button">
    <i class="fa fa-plus"></i>Add place
</button>

【讨论】:

    【解决方案2】:

    您需要为第一个按钮添加右边距或为第二个按钮添加左边距。这可以在 CSS 中完成,也可以使用 Bootstrap spacing utility

    【讨论】: