如何添加边缘顶部类="行"元素使用twitter引导框架?
当前回答
您可以添加以下代码:
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
其他回答
有一个技巧可以自动为容器中的第2 +行添加边距。
.container-row-margin .row + .row {
margin-top: 1rem;
}
将.container-row-margin添加到容器中,结果如下:
完整的HTML:
<div class="bg-secondary text-white">
div outside of the container.
</div>
<div class="container container-row-margin">
<div class="row">
<div class="col col-4 bg-warning">
Row without top margin
</div>
</div>
<div class="row">
<div class="col col-4 bg-primary text-white">
Row with top margin
</div>
</div>
<div class="row">
<div class="col col-4 bg-primary text-white">
Row with top margin
</div>
</div>
</div>
<div class="bg-secondary text-white">
div outside of the container.
</div>
取自官方样品。
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的变量)
我正在使用这些类来修改上边距:
.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有你的方式。
如果您只想在一个页面上更改,请添加以下样式规则:
#myCustomDivID .row {
margin-top:20px;
}
<div class="row row-padding">
简单的代码