是否可以将超过 mt-5 添加到我的最高保证金中？

Question

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

Answer 1

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

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

Answer 2

为响应式网站使用 rem 单位

通过使用class

.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>

Answer 3

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

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

Bootstrap classes 已经使用 rem 作为边距 classes，所以最好保持相同的单位。现有的 classes 使用这些值（它可以帮助您决定要使用什么作为您的值）：

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

如果您始终在行中所有元素的顶部使用它，则不会影响响应速度。但是，如果您同时向左或向右使用它，那么它会影响响应速度，因为它会影响宽度。