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