在引导按钮文档中，按钮之间的边距是如何实现的答案

【问题标题】：In the bootstrap button documentation, how are the margins between buttons achieved在引导按钮文档中，按钮之间的边距是如何实现的
【发布时间】：2019-02-23 02:46:35
【问题描述】：

这不是关于引导程序等的“边距”的基本问题。我知道如何使用边距以及如何使用引导程序。

我特别想知道，在我在 Bootstrap 文档中提供的示例中，它们是如何实现利润的。我没有看到他们添加边距或使用 flexbox 或其他一些间距方法。我一定忽略了一些东西，但我不知道是什么。

有人可以帮助解释他们是如何做到的吗？文档：https://getbootstrap.com/docs/4.3/components/buttons/

视觉：

【问题讨论】：

这是因为它们是内联块元素。所以间隙只是内联间隙。他们没有提到这一点，但他们的按钮从一开始就是内联块元素。
@joshmoto 啊！是的，我实际上不知道 inline 和 inline-block 元素具有充当“小边距”的间隙。很有意思！知道如何控制间隙大小吗？谢谢！
它们之间只有一个间隙，因为代码在新行或每个按钮之间存在单个html空格。
你看到我的回答了吗？

标签： twitter-bootstrap css bootstrap-4

【解决方案1】：

请参阅下面的代码演示，了解如何在引导程序 4 中控制内联块按钮间距。

https://www.codeply.com/go/Vaen7GzvNF

使用 Bootstrap 实用程序 margin-right .mr-* classes 使差距更大

<button type="button" class="btn btn-primary mr-1">.mr-1</button>
<button type="button" class="btn btn-secondary mr-2">.mr-2</button>
<button type="button" class="btn btn-success mr-3">.mr-3</button>
<button type="button" class="btn btn-danger mr-4">.mr-4</button>
<button type="button" class="btn btn-warning mr-5">.mr-5</button>
<button type="button" class="btn btn-info">no class</button>

通过确保按钮 html 之间没有间隙来消除间隙

<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><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button>

如果你想保持整洁，你也可以使用注释标签去除按钮之间的间隙，或者使用php

<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><!--
    --><button type="button" class="btn btn-danger">Danger</button><!--
    --><button type="button" class="btn btn-warning">Warning</button><!--
    --><button type="button" class="btn btn-info">Info</button>

【讨论】：