Bootstrap 4 -为什么间隔余量类mt-3对标签不起作用< a>?

busg9geu  于 2022-12-31  发布在  Bootstrap
关注(0)|答案(4)|浏览(364)

我试图使用间隔类mt-3的一些链接,以添加一个页边距顶部在一个页面上加载bootstrap 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中,您可以看到这种行为。

ylamdve6

ylamdve61#

<a>标记是内联元素,因此没有边距。您可以将CSS更改为a {display: inline-block;},或者使用Bootstrap 4中的display utilityd-inline-block

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

yk9xbfzb2#

这是因为链接是内联元素,您可以添加a {display: inline-block}来查看链接的边距

5n0oy7gb

5n0oy7gb3#

对我来说,一个很好的解决方案是将<a>标记 Package 在<p>标记中,然后对p标记应用bootstrap边距/格式。
例如here

f87krz0w

f87krz0w4#

<a>标记这样的内联元素不支持边距和填充。请先将其转换为block元素,以便在元素中使用mtmb

相关问题