好吧，只是让你知道发生了什么，我固定使用一些新的类Acyra上面说:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

只要我想，我做<div class="row top7"></div>

为了更好的响应，你可以添加margin-top:7%而不是5px，例如:D

对于Bootstrap 4，间距应该使用

简写实用程序类

格式如下:

{财产}{双方}-{大小}

其中财产是其中之一:

M -用于设置边距的类 用于设置填充的类

其中边是其中之一:

T -用于设置边距顶部或填充顶部的类 B -用于设置margin-bottom或padding-bottom的类 L -用于设置左边距或左填充的类 R -用于设置右边距或右填充的类 X -用于同时设置*-left和*-right的类 Y -用于同时设置*-top和*-bottom的类 Blank -用于在元素的四个边都设置了边距或填充的类

其中size为其中之一:

0 -用于通过将其设置为0来消除空白或填充的类 1 -(默认情况下)用于将margin或padding设置为$spacer * .25的类 2 -(默认情况下)用于将margin或padding设置为$spacer *的类 3 -(默认情况下)用于将margin或padding设置为$spacer的类 4 -(默认情况下)用于将margin或padding设置为$spacer * 1.5的类 5 -(默认情况下)用于将margin或padding设置为$spacer * 3的类 Auto -用于将边距设置为Auto的类

所以你应该做以下任何一件事:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

更多的解释请阅读文档。 在这里试试现场的例子。

引导5

在Bootstrap 5中，你可以这样做:

<div class="row mt-X"></div>

其中X是从0(没有空格)到5(有很多空格)之间的数字。关于不同的边距/填充大小和特定于断点的控件的更多信息，请查看文档。

在Twitter引导中编辑或重写行是一个坏主意，因为这是页面脚手架的核心部分，您将需要没有顶部边距的行。

要解决这个问题，可以创建一个新类“top-buffer”，添加所需的标准裕度。

.top-buffer { margin-top:20px; }

然后在需要上边距的行div上使用它。

<div class="row top-buffer"> ...

<div class="row row-padding">

简单的代码

您可以添加以下代码:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}