css - 如何删除我的 Bootstrap 4 链接之间的这些边距？

Question

我正在实现 Bootstrap 4 内联 block 链接，它们之间似乎有一个看不见的边距，我似乎无法删除。

截图:

代码笔 here .

代码:

<div>
    <!-- There shoud be NO MARGIN between the links -->
    <a href="#" class="btn btn-danger">
        Button A</a>
    <a href="#" class="btn btn-secondary like-button">
        Button B
    </a>
</div>

如何去除这些看不见的边距？

Answer 1

您可以使用 Bootstrap Button Group，具体取决于您最终想要做什么。

<div class="btn-group" role="group" aria-label="Basic example">
   ...you buttons
</div>

参见 Docs

工作示例:

/*EXAMPLE CSS ONLY, NOT QUESTION RELATED*/

body {
  padding-top: 50px;
  text-align: center;
}
/*EXAMPLE CSS ONLY, NOT QUESTION RELATED*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic example">
  <a href="#" class="btn btn-danger">Button A</a>
  <a href="#" class="btn btn-secondary like-button">Button B</a>
</div>