如何在Bootstrap右对齐按钮之间添加间距？

Question

我希望在两个右侧对齐按钮之间添加3个空格。是否有任何Bootstrap解决方案可以实现此功能，而不需要添加自定义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>

Fiddle演示：http://jsfiddle.net/6816gq84/1/

- LeMoussel

Answer 1

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

<div class="text-right btn-toolbar">
       <button class="btn-info btn">Log in</button>
       <button class="btn-info btn">Log Out </button>
</div>

请点击这里查看。

- SASM

---

对我而言只有pull-right可以生效，无法使用text-right。 - JBernardo

不错。：）它帮助了我。 - Neeraj Verma

Answer 2

我为您提供一个基本的解决方案：如何在同一div中的Bootstrap按钮之间添加空格？。

<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>

- LeMoussel

---

将其投票为 https://dev59.com/hZXfa4cB1Zd3GeqPZxeh 是一个更好的解决方案，由 @SASM 提供。 - Neeraj Verma

Answer 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>

- B.S.

Answer 4

我不确定是否已经存在任何适用于您想要做的内容的引导程序解决方案，但是还有其他方法，具体取决于您所说的“自定义CSS”的含义。

例如，您可以添加一个span标签，并添加一个内联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>

- David Oudart