如何添加边缘顶部类="行"元素使用twitter引导框架?
当前回答
你可以使用下面的类进行引导4:
mt-0 mt-1 mt-2 mt-3 mt-4 ...
裁判:https://v4-alpha.getbootstrap.com/utilities/spacing/
其他回答
如果你正在使用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 alpha+中你可以使用这个
class margin-bottom-5
类的命名格式为:{property}-{sides}-{size}
我正在使用这些类来修改上边距:
.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>
如果你喜欢像素,所以改变em到px有你的方式。
对于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">
更多的解释请阅读文档。 在这里试试现场的例子。
引导3
如果需要在引导中分离行,可以简单地使用.form-group。这将在行底部添加15px的边缘。
在您的例子中,要获得margin top,可以将这个类添加到之前的.row元素中
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}
引导4
您可以使用内置间距类
<div class="row mt-3"></div>
类名中的“t”使它只适用于“顶部”,有类似的类用于底部,左侧,右侧。数字定义了空间大小。