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

水平间隔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/

请将它们放在btn-toolbar其他容器中，而不是btn-group。btn-group将他们连接在一起。有关Bootstrap 文档的更多信息。

编辑：最初的问题是Bootstrap 2.x，但对于Bootstrap 3和Bootstrap 4仍然有效。

在Bootstrap 4中，您将需要使用实用程序类（例如mx-2）向组中添加适当的边距。

就像Miroslav Popovic兄弟所说的那样，将按钮放在一个类（class =“ btn-toolbar”）中。它的确很棒。

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

您可以为Bootstrap使用间距，而无需任何其他CSS。只需将类添加到您的按钮即可。这是针对版本4的。

您应该使用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>

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：就我而言，我希望我的按钮显示在屏幕的右侧，因此向右拉。

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

在哪里可以做：

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

要么

button{
  margin: 13px;
}

我使用了Bootstrap 4按钮插件（https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin），并将四舍五入的类添加到标签，并将mx-1类添加到中间按钮以实现所需的单独单选按钮的外观。使用btn-toolbar类使单选按钮圆圈对我显示，这不是我想要的。希望这对某人有帮助。

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

实现此目的的另一种方法是在按钮中添加类.btn-space

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

并如下定义此类

.btn-space {
    margin-right: 15px;
}

我实际上遇到了相同的要求。我只是像这样使用CSS覆盖

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

如果使用Bootstrap，则可以更改样式，例如：如果只需要一页，则在head标签之间添加 .btn-group btn {margin-right：1rem;}

如果是将所有网站添加到CSS文件

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>

我最终做了与标记迪贝相似的事情，但是我需要以稍微不同的方式弄清楚间距。

col-x引导程序中的类可以是绝对的救生员。我最终做了类似的事情：

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

这使我能够以很好的间距对齐标题和输入开关。可以将相同的想法应用于按钮，并允许您停止触摸按钮。

（旁注：我希望这是对上面链接的评论，但我的声誉还不够高）