您可以添加以下代码:

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

我将这些类添加到引导样式表中

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

例子

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

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

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

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

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

引导5

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

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

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

有时候margin-top会导致设计问题:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

所以，我建议创建“margin-bottom classes”而不是“margin-top classes”，并将它们应用到前一项。

如果你正在使用Bootstrap导入LESS Bootstrap文件，尝试用比例Bootstrap主题空间定义边缘-底部类:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

我的技巧。不是很干净，但对我来说还行

<p>&nbsp;</p>