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

Question

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

Devtools Screenshot

这个space从哪里来的？

编辑1

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

Devtools Screenshot of my inline-block buttons

转载示例：

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

Answer 1

正如您在 bootstrap 示例中看到的那样，所有输入而不是一个按钮，如果您只是复制另一个按钮而没有那个将像您的示例一样。您需要像 bootstrap:

一样重新创建边距 class

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

正如您在此处看到的那样，如果您按下（按回车键）所有代码都按预期工作，那么按钮将有一个 space 否则将没有 space

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

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

Where does the spacing in Bootstrap button examples come from?

css

twitter-bootstrap

tailwind-css

编辑1