twitter-bootstrap - Bootstrap 4 - 为什么间距边距类 mt-3 不适用于标签？

Question

我正在尝试在某些链接上使用间距类 mt-3 在加载引导程序 4 的页面中添加页边距顶部。

但是课程没有任何效果，我没有得到任何利润。

<div class="row py-1 border-bottom">
     <div class="col-6">
          Menu voice 2
     </div>
     <div class="col-6">
         <a href="#" class="bg-success text-white p-1 mt-3">it</a>
         <a href="#" class="bg-success text-white p-1 mt-3">en</a>
         <a href="#" class="bg-success text-white p-1 mt-3">fr</a>
     </div>
</div>

在这个jsfiddle你可以看到行为。

标签： twitter-bootstrapbootstrap-4

Answer 1

<a>标签是内联元素，因此它们没有边距。您可以将 CSS 更改为a {display: inline-block;}，或使用Bootstrap 4 中的显示实用程序类：d-inline-block

<a href="#" class="bg-success text-white d-inline-block p-1 mt-3">it</a>