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

Question

这不是有关引导程序等“边距”的基本问题。我知道如何同时使用边距和引导程序。

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

有人可以帮助解释他们的工作方式吗？ 文档：https://getbootstrap.com/docs/4.3/components/buttons/

视觉：

Answer 1

有关如何在引导程序4中控制行内块按钮间距的信息，请参见下面的此Codeply演示。

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

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

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