如何添加边缘顶部类="行"元素使用twitter引导框架?
当前回答
有时候margin-top会导致设计问题:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
所以,我建议创建“margin-bottom classes”而不是“margin-top classes”,并将它们应用到前一项。
如果你正在使用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);}
其他回答
<div class="row row-padding">
简单的代码
我的技巧。不是很干净,但对我来说还行
<p> </p>
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的变量)
如果您只想在一个页面上更改,请添加以下样式规则:
#myCustomDivID .row {
margin-top:20px;
}
您可以添加以下代码:
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}