Twitter Bootstrap – 在行之间添加顶部空间
如何使用twitter引导框架添加边缘到class="row"元素？
在Twitter引导中编辑或覆盖行是一个坏主意，因为这是页面脚手架的核心部分，您将需要没有顶部边距的行。
为了解决这个问题，改为创build一个新的类“顶级缓冲区”，添加您需要的标准边距。
.top-buffer { margin-top:20px; }
然后在你需要上边距的行div上使用它。
<div class="row top-buffer"> ...
好，只是让你知道发生了什么事情，我修正了一些新的类，正如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
有时候，margin-top会导致devise问题：
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
所以，我build议创build“保证金最低类”而不是“保证金最高级”，并将其应用到上一个项目。
如果您正在使用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);}
我将这些类添加到我的引导样式表
.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>
我正在使用这些类来改变上边距：
.margin-top-05 { margin-top: 0.5em; } .margin-top-10 { margin-top: 1.0em; } .margin-top-15 { margin-top: 1.5em; } .margin-top-20 { margin-top: 2.0em; } .margin-top-25 { margin-top: 2.5em; } .margin-top-30 { margin-top: 3.0em; }
当我需要一个元素与上面的元素有2em的间距时，我使用它：
<div class="row margin-top-20">Something here</div>
如果你喜欢像素，那么把它改成px就可以了。
如果您需要在引导程序中分隔行，则可以简单地使用.form-group 。 这增加了15px的边缘的行底部。
在你的情况下，为了获得最高限额，你可以添加这个类到以前的.row元素
<div class="row form-group"> /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
对于Bootstrap 4应该使用间距
速记课程
格式如下：
{property}{sides}-{size}
所以你应该这样做：
<div class="row mt-1">
来源： https ： //v4-alpha.getbootstrap.com/utilities/spacing/
你可以使用下面的类来引导4：
mt-0 mt-1 mt-2 mt-3 mt-4 …
Ref： https ： //v4-alpha.getbootstrap.com/utilities/spacing/
添加到.css文件中的这个类：
.row { margin-left: -20px; *zoom: 1; margin-top: 50px; }
或者创build一个新的类并将其添加到元素中
.rowSpecificFormName td { margin-top: 50px; }
Bootstrap 4 alpha，用于margin-top：缩写CSS类名称mt-1，mt-2（mt-lg-5，mt-sm-2）同样用于底部，右侧，左侧，而且您也有自动typesml-汽车
<div class="mt-lg-1" ...>
Unites是从1到5：在variables.scss这意味着如果你设置mt-1，它会给出.25rem的margin。
$spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: ($spacer-x * .25), y: ($spacer-y * .25) ), 2: ( x: ($spacer-x * .5), y: ($spacer-y * .5) ), 3: ( x: $spacer-x, y: $spacer-y ), 4: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 5: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ) ) !default;
这里阅读更多
https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
如果您只想在一个页面上更改，请添加以下样式规则：
#myCustomDivID .row { margin-top:20px; }
在Bootstrap 4 alpha +中，你可以使用这个
class margin-bottom-5
这些类的格式是： {property}-{sides}-{size}
Bootstrap3
CSS（只有天沟，没有边缘）：
.row.row-gutter { margin-bottom: -15px; overflow: hidden; } .row.row-gutter > *[class^="col"] { margin-bottom: 15px; }
CSS（等于15px / 2左右）：
.row.row-margins { padding-top: 7px; /* or margin-top: 7px; */ padding-bottom: 7px; /* or margin-bottom: 7px; */ } .row.row-margins > *[class^="col"] { margin-top: 8px; margin-bottom: 8px; }
用法：
<div class="row row-gutter"> <div class="col col-sm-9">first</div> <div class="col col-sm-3">second</div> <div class="col col-sm-12">third</div> </div>
（与SASS或LESS 15px可能是自举的variables）
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>
我的窍门 不是那么干净，但对我来说效果很好
<p> </p>
