<div class="row row-padding">

简单的代码

如果你正在使用BootStrap 3.3.7，你可以通过NPM使用开源库BootStrap -spacer

npm install bootstrap-spacer

或者你可以访问github页面:

https://github.com/chigozieorunta/bootstrap-spacer

下面是一个使用.row-spacer类对行进行空格的示例:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

如果你需要列之间有空格，你也可以添加.row-col-spacer类:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

你也可以把各种各样的.row-spacer和.row-col-spacer类组合在一起:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

对于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">

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

在.css文件中添加到这个类:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

或者创建一个新类并将其添加到元素中

.rowSpecificFormName td {
    margin-top: 50px;
}

你可以使用下面的类进行引导4:

mt-0 mt-1 mt-2 mt-3 mt-4 .．.

裁判:https://v4-alpha.getbootstrap.com/utilities/spacing/

<div class="row row-padding">

简单的代码