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

Question

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

截图：

Codepen 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

为按钮添加一个新的 class 并使用

margin: 0 -4px 0 0;

代码笔https://codepen.io/norcaljohnny/pen/BQqroO

Answer 2

那是因为按钮显示为"inline-block"。

它们之间有一个 space，不是边距。您可以通过删除每个标签之间的 space/line 中断来修复它：

<button>first</button></button>second</button>

Answer 3

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

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

Answer 4

问题原来是链接之间 HTML 中的换行符。我不确定这是故意的还是某种浏览器错误。无论如何..删除换行符有效：

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

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

How to remove these margins between my Bootstrap 4 links?

css

twitter-bootstrap

bootstrap-4