如何添加边缘顶部类="行"元素使用twitter引导框架?
当前回答
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 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>
在.css文件中添加到这个类:
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}
或者创建一个新类并将其添加到元素中
.rowSpecificFormName td {
margin-top: 50px;
}
我的技巧。不是很干净,但对我来说还行
<p> </p>
只需简单地使用这个bs3-upgrade帮助空格和文本对齐…
https://github.com/studija/bs3-upgrade
我将这些类添加到引导样式表中
.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>