为什么类“mt-50”在Bootstrap 5中不起作用？

vhipe2zx 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(442)

我试着用mt-50把h1居中，但是它没有给我在红色边框和蓝色边框之间留一个边距。然而，当我用margin-top：50 px的CSS样式时，它给了我想要的结果。有人能解释一下这个区别吗？因为我认为bootstrap中的mt-50和CSS中的margin-top：50 px是一样的？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="header my-5 border border-danger">
  <h1 class="col-6 border border-primary mx-auto text-center mt-50"> Welcome to Food Mart </h1>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/73616344/why-doesnt-the-class-mt-50-work-in-bootstrap-5

1条答案

按热度按时间

klr1opcd1#

Bootstrap不提供mt-50类。如果你更改为mt-5，它将工作。
Bootstrap 提供从mt-0到mt-5加上mt-auto的类。
mt-5设置为margin-top: 3rem，如果根字体大小为16 px，则mt-5为48 px，接近50 px。

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.css" rel="stylesheet"/>
<div class="header my-5 border border-danger">
  <h1 class="col-6 border border-primary mx-auto text-center mt-5 d-block"> Welcome to Food Mart </h1>
</div>

赞(0）回复(0）举报 2022-12-07

我来回答

为什么类“mt-50”在Bootstrap 5中不起作用？

1条答案

相关问题

热门标签

最新问答