如何添加边缘顶部类="行"元素使用twitter引导框架?
当前回答
如果你正在使用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>
其他回答
好吧,只是让你知道发生了什么,我固定使用一些新的类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
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>
<div class="row row-padding">
简单的代码
我的技巧。不是很干净,但对我来说还行
<p> </p>
在Twitter引导中编辑或重写行是一个坏主意,因为这是页面脚手架的核心部分,您将需要没有顶部边距的行。
要解决这个问题,可以创建一个新类“top-buffer”,添加所需的标准裕度。
.top-buffer { margin-top:20px; }
然后在需要上边距的行div上使用它。
<div class="row top-buffer"> ...