Bootstrap 4按钮示例：按钮之间的空间来自哪里？

Question

我试图检查一个＆＃34;按钮＆＃34;来自Bootstrap 4的示例。它们有一排漂亮的按钮，如下所示：

http://getbootstrap.com/docs/4.0/components/buttons/

但我不明白，按钮之间的空间来自哪里。

这不是边距，不是柔性框对齐，不是透明边框。 那么，它是如何工作的？实际上，我在开发工具中禁用了所有样式，但该空间并没有消失。

Answer 1

空间在那里，因为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-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>

Answer 2

如果您使用firefox查看此处的空格，请查看屏幕截图：

您可以通过添加自己的css规则（如合并或填充）来删除空间。

由于

Answer 3

您可以使用简单的父元素flex

来解决它

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

<style>
    .button{
        display: flex;
    }
    .button > button{
        display: inline-block;
    }
</style>

Answer 4

空间即将到来，因为默认情况下按钮是inline个元素......它不是一个错误..只是在浏览器中内联元素对齐的方式......

所以从你的编码中删除所有空间是一个解决方案，我认为我不会这样做，因为如果你编码你的代码应该看起来很好......对..

当您使用 bootstrap4 时，您可以使用bootstrap d-flex类

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent d-flex">
  <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>
</div>

另一种解决方案是，您可以将按钮父级的font-size设置为0，然后将font-size按钮设置为默认按钮

Stack Snippet

.parent {
  font-size: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent">
  <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>
</div>