只需简单地使用这个bs3-upgrade帮助空格和文本对齐…

https://github.com/studija/bs3-upgrade

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

在Bootstrap 4 alpha+中你可以使用这个

class margin-bottom-5

类的命名格式为:{property}-{sides}-{size}

只需简单地使用这个bs3-upgrade帮助空格和文本对齐…

https://github.com/studija/bs3-upgrade

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

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

如果你正在使用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>