Bootstrap 4 按钮示例：按钮之间的空间来自哪里？ [复制]答案

【问题标题】：Bootstrap 4 buttons example: where does the space between buttons is coming from? [duplicate]Bootstrap 4 按钮示例：按钮之间的空间来自哪里？ [复制]
【发布时间】：2018-01-24 05:14:11
【问题描述】：

我尝试检查 Bootstrap 4 中的“按钮”示例。它们有一排漂亮的按钮，如下所示：

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

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

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

【问题讨论】：

很高兴有人问这个问题！打扰了我大约 10 分钟！

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

如果您使用 Firefox 检查来自这里的空间，请查看屏幕截图：

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

谢谢

【讨论】：

感谢发布 Firefox 的这个好功能

【解决方案3】：

空间来了，因为按钮默认是 inline 元素...这不是错误...它只是内联元素在浏览器中对齐的方式...

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

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

<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 设置为默认值

堆栈片段

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

【讨论】：

【解决方案4】：

您可以使用简单的父元素来解决它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>

【讨论】：