172

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

4

13 回答 13

347

把它们放在里面btn-toolbar或其他容器里，不要btn-group。btn-group将它们连接在一起。有关 Bootstrap文档的更多信息。

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

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

于 2012-06-26T22:10:34.500 回答
82

只需按照兄弟 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>

于 2015-10-24T07:12:12.253 回答
11

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

于 2017-09-28T13:21:22.003 回答
10

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

于 2018-11-13T20:20:18.147 回答
9

你应该使用引导 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>
于 2018-02-11T16:04:26.857 回答
6

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

你可以在哪里做：

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

或者

button{
  margin: 13px;
}
于 2015-10-05T19:03:47.770 回答
5

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>
于 2020-07-20T14:30:43.057 回答
2

我使用了 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>
于 2018-05-09T07:54:08.383 回答
2

实现此目的的另一种方法是在按钮中添加一个类 .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;
}
于 2018-05-23T02:26:32.570 回答
2

这是基于文档的另一种方法。

 <div class="d-grid gap-2 d-md-flex" >
    <button type="button" class="btn btn-outline-primary btn-sm">button1</button>
    <button type="button" class="btn btn-outline-primary btn-sm">button2</button>
 </div>
于 2021-05-03T20:05:10.787 回答
0

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

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
于 2014-01-29T02:57:19.523 回答
0

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

如果是为所有网站添加到 css 文件

于 2018-02-11T15:56:20.473 回答
-1

我最终做了类似于mark dibe所做的事情，但我需要以稍微不同的方式计算间距。

bootstrap 中的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>

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

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

于 2019-07-12T19:18:55.087 回答