如何在右对齐引导按钮之间添加空格？答案

【问题标题】：How to add space between right align bootstrap button?如何在右对齐引导按钮之间添加空格？
【发布时间】：2020-11-29 18:39:47
【问题描述】：

我想在两个右对齐按钮之间添加 3 个空格。是否有任何不添加自定义 css 的引导解决方案？

我这样做：

    <div class="text-right">
           <button class="btn-info btn">Log in</button>
<!-- Add 3 spaces between button -->
           <button class="btn-info btn">Log Out </button>
    </div>

小提琴演示：http://jsfiddle.net/6816gq84/1/

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以将btn-toolbar 类添加到容器div。看看here

【讨论】：

它只适用于 pull-right 而不是 text-right 对我来说
不错。 :)。它帮助了我。

【解决方案2】：

我做了这个初步的解决方案：How to add space between bootstrap buttons in same div?。

<div class="btn-group pull-right row">
   <div class="col-md-3"><button class="btn btn-default" type="button">Clôturer</button></div>
   <div class="col-md-1"></div>
   <div class="col-md-3"><button class="btn btn-primary" type="button">Soumettre</button></div>
</div>

【讨论】：

将其投票为stackoverflow.com/questions/36015022/… 是@SASM 的一个更好的解决方案

【解决方案3】：

这对我来说也很好用：

<div style="display: flex ; justify-content: flex-end">
    <button class="btn-info btn mr-3">Log in</button>
    <button class="btn-info btn">Log Out </button>
</div>

【讨论】：

【解决方案4】：

我不确定是否已经存在任何引导解决方案来满足您的需求，但还有其他方法，具体取决于您所说的“自定义 css”。

例如，您可以添加一个 span balise，并添加一个内联 css，将宽度定义为 3em（3 个空格）。它是 HTML/CSS，但您不修改按钮类的 css。

<div class="text-right">
       <button class="btn-info btn">Log in</button>
       <span style="width:3em;"> </span>
       <button class="btn-info btn">Log Out </button>
</div>

【讨论】：