如何在同一个div中的两个按钮之间留出空间？

Question

水平空间Bootstrap按钮的最佳方法是什么？

按钮触摸时:

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

jsfiddle显示问题:http://jsfiddle.net/hhimanshu/sYLRq/4/

Answer 1

把它们放在里面btn-toolbar或其他容器中,不是btn-group.btn-group将他们联系在一起.有关Bootstrap 文档的更多信息.

编辑:原始问题是Bootstrap 2.x,但同样对Bootstrap 3和Bootstrap 4仍然有效.

在Bootstrap 4中,您需要使用实用程序类(例如mx-2)为组添加适当的边距.

Answer 2

只需将按钮放在一个类(class ="btn-toolbar")中,就像兄弟Miroslav Popovic所说的那样.它很棒.

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

Answer 3

Dragan B 建议的是 Bootstrap 4 的正确方法。我在下面举了一个例子。例如，mr-3 是 margin-right:1rem!important

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

ps：就我而言，我希望我的按钮显示在屏幕右侧，因此向右拉。

Answer 4

您可以为Bootstrap使用间距,不需要任何其他CSS.只需将类添加到按钮即可.这适用于版本4.

Answer 5

您应该使用bootstrap v.4

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

Answer 6

在大多数情况下，最简单的方法是保证金。

在哪里可以做：

button{
  margin: 13px 12px 12px 10px;
}

要么

button{
  margin: 13px;
}

Answer 7

Dragan B. 解决方案是正确的。在我的情况下，我需要在堆叠时将按钮垂直间隔开，因此我向它们添加了 mb-2 属性。

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>