如何在示例中添加引导按钮之间的间距？答案

【问题标题】：How to add spacing between bootstrap buttons like in example?如何在示例中添加引导按钮之间的间距？
【发布时间】：2019-11-08 16:14:33
【问题描述】：

官网上有一个bootstrap button的综合例子，但是我不明白为什么按钮之间有间距，怎么做？任何浏览器调试工具都不会显示任何内容：有一些顶部和底部边距，但没有关于水平间距！谁能解释一下？

https://getbootstrap.com/docs/4.3/components/buttons/

【问题讨论】：

这应该是内联元素的常规间距。如果你检查它们，你会看到它们有 display: inline-block;... 只需在它们之间放置一个空格。
您使用的是哪个版本的引导程序？ 3 还是 4？大声笑没关系，链接... derp。
按钮之间的间距是因为hover事件

标签： html css twitter-bootstrap button spacing

【解决方案1】：

由于您使用的是 bootstrap 4，您还可以将“mr-1”类添加到您的按钮；这样你就不必改变 css（除非你想:)）。

【讨论】：

【解决方案2】：

只需添加您的样式，例如：

button.btn {
    margin: 0 1px;
}

但请确保它不会影响您之前编写的其他样式

【讨论】：

【解决方案3】：

这是由于他们的重启样式表为您正在查看的文档设置样式。

如果你打开一个谷歌元素检查器，它们实际上是按钮左右两侧共有 2 个maring 和 6px 填充。这不适用于您在模板中使用的按钮。

【讨论】：

【解决方案4】：

您所描述的间距是当您有多个 display:inline-block 元素以及在各自的行上创建它们的代码时发生的情况。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<p>These buttons will appear with spacing between them.</p>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

<hr />

<p>These buttons will not.</p>

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button>

有多种方法可以使用.m-*-* 实用程序类或其他自定义 CSS 手动添加间距。或者您可以简单地输出 HTML，每个按钮换行。

【讨论】：