如何添加边缘顶部类="行"元素使用twitter引导框架?
当前回答
好吧,只是让你知道发生了什么,我固定使用一些新的类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
其他回答
您可以添加以下代码:
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
引导3
如果需要在引导中分离行,可以简单地使用.form-group。这将在行底部添加15px的边缘。
在您的例子中,要获得margin top,可以将这个类添加到之前的.row元素中
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}
引导4
您可以使用内置间距类
<div class="row mt-3"></div>
类名中的“t”使它只适用于“顶部”,有类似的类用于底部,左侧,右侧。数字定义了空间大小。
有一个技巧可以自动为容器中的第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>
取自官方样品。
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>
你可以使用下面的类进行引导4:
mt-0 mt-1 mt-2 mt-3 mt-4 ...
裁判:https://v4-alpha.getbootstrap.com/utilities/spacing/