是否可以在我的上边距中添加超过 mt-5？答案

【问题标题】：Is it possible to add more than mt-5 to my top margin?是否可以在我的上边距中添加超过 mt-5？
【发布时间】：2020-09-15 02:37:03
【问题描述】：

我想在我的网站上对齐一些元素，我已经在我的 HTML 中使用了 mt-5，但我需要更多的边距。我该怎么做？

【问题讨论】：

你需要在 Bootstrap 的基础上创建自己的类

标签： html css bootstrap-4 margin

【解决方案1】：

Bootstrap 没有更高的价值，但您可以创建自己的类。文档说"You can add more sizes by adding entries to the $spacers Sass map variable."，但如果您不想重新编译 SASS，您可以像这样创建自己的类：

.mt-6 {
    margin-top: 4rem; // or the value you want
}

Bootstrap 类已经将 rem 用于边距类，因此最好使用相同的单元。现有的类使用这些值（它可以帮助您决定要为您的值使用什么）：

.mt-5 设置为 3rem，所以这是 1rem 单位。
.mt-4 是 1.5rem（因此您可能希望在班级中使用更高的 1.5rem）
.mt-3 是 1rem
.mt-2 是 0.5rem
.mt-1 是 0.25rem

如果你在行中所有元素的顶部始终使用它，它不会影响响应性。但是如果你也使用它左或右，那么它会影响响应，因为它会影响宽度。

【讨论】：

我建议你尽可能去%。 rem 可能会出现意外行为，具体取决于 default em 值的设置。因此，除非您在根级别定义自己的默认em 值（浏览器默认为16px），否则用户可以拥有自己的设置，默认em。需要注意这一点。
@Martin 很好，但这里不是问题，因为 Bootstrap 已经在其边距类中使用 rems 作为其值，因此它已经定义了 rem

【解决方案2】：

您可以像这样添加自己的样式：

<div style="margin-top: 100px;"></div>

【讨论】：

嗨！谢谢，但它可以在响应式网站中使用吗？
它像 bootstrap 的 mt-5 一样添加边距，它只是使用类来添加它们。我只是注意到，mt-5 会在元素的顶部添加边距，因此您需要使用边距顶部而不是边距。我将编辑我的答案。
查看 Bootstrap 网站here的第一个示例

【解决方案3】：

为响应式网站使用 rem 单位

通过使用类

.mt-6{margin-top:5rem;}

通过使用 id

#mt-6{margin-top:5rem;}

通过内联

#mt-6{margin-top:5rem;}

.mt-6{margin-top:5rem;}
#mt-6{margin-top:5rem;}

// add by class
<div class="mt-6">This text</div>

// add by id
<div id="mt-6">This text</div>

// add by inline style
<div style="margin-top:6rem;">This text</div>

【讨论】：