引导4-为什么间距裕度类mt-3不能在<a>标记上工作？

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>

在这个小提琴中，您可以看到这种行为。

Answer 1

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

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

Answer 2

内联元素(如<a>标记)不支持边距和填充。首先将其转换为块元素，以便在元素中使用mt或mb。