Bootstrap 按钮示例中的间距从何而来？

Question

在Bootstrap 5 button examples 中，按钮之间有一个空格。我不确定这个空间是在哪里定义的，也没有在 devtools 中找到任何边距：

Devtools Screenshot

这个空间是从哪里来的？

编辑1

在我的示例中（使用 tailwind），尽管使用了 inline-block，但仍缺少空间。有没有办法操纵间距，或者我错过了什么。

Devtools Screenshot of my inline-block buttons

转载示例：

https://codepen.io/jjoharrer/pen/ZEyQWyo

Answer 1

正如您在引导示例中看到的那样，所有输入都是输入而不是一个按钮，如果您只是复制另一个按钮而没有那个按钮，那么就像您的示例一样。您需要像 bootstrap 一样重新创建边距类：

.button {
  background-color: green;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div>
  <div>
    <button id="" class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 mr-2">Primary</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-secondary py-1 px-2 mr-2">Secondary</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-info py-1 px-2 mr-2">Info</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-success py-1 px-2 mr-2">Success</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-warning py-1 px-2 mr-2">Warning</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-danger py-1 px-2 mr-2">Danger</button>
    <!--v-if-->
  </div>
</div>

在这种情况下，我使用 mr-2（右边距 2）

---

正如您在此处看到的，如果您向下（按回车键）使用代码，所有工作都按预期工作，因此按钮将有一个空格，否则将没有空格

.button {
  background-color: green;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div>
  <div>
    <button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
    <button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
    <button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button><button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
  </div>
</div>