我想知道,为Bootstrap 3列提供保证金的常用方法是什么。我可能不想破解Bootstrap CSS并想知道我是否应该应用其他类,或者是否有另一种好方法?
示例:
<div class="row">
<div class="col-lg-6 v-margin">
<!-- some content -->
</div>
</div>
和
.v-margin {
margin: 25px 0;
}
此外,我已经阅读了几次填充是首选,因为我不知道原因。任何人都可以提供快速建议吗?
由于
答案 0 :(得分:4)
在这种情况下,你可以选择一个自定义css我会在.row
项目上使用类名,如果你想在这样的列上使用相同的单独名称:
<div class="row v-margin">
<div class="col-lg-6">
<div>some content</div>
</div>
<div class="col-lg-6">
<div>some content</div>
</div>
</div>
然后使用css apply padding
:
.v-margin > div {
padding:0 20px;
}
.v-margin > div:first-child {
padding-left:40px;
}
.v-margin > div:last-child {
padding-right:40px;
}
选中 BootplyDemo
现在为什么选择padding
?
因为Bootstrap适用于属性box:sizing:border-box
并且固定width
用于列。
如果使用margin
,则会破坏浮动布局,因为边距不在宽度值范围内。
相反,当您添加padding
时,它会包含在具有box-sizing属性的固定宽度值中。
答案 1 :(得分:1)
bootstrap有jumbotron和那些内部有大填充的井
如果我们使用它们,那么我们必须覆盖它们的背景,因为它们在背景中使用颜色。但它们并不适合大型容器。
现在我们将转到下面的确切答案
我不这么认为是坏主意因为有时候boostrap不提供你需要的一切。为了满足你的要求它是正常的,因为你在引导程序中添加你的行为,但是当你处理它也作为引导工作时它很好
例如根据设备,如果您控制保证金的流量就可以了。
@media (max-width: 767px) {
.v-marg-small { margin: 5px 0;}
.v-marg-normal { margin: 10px 0;}
}
@media (min-width: 768px) {
.v-marg-small { margin: 10px 0;}
.v-marg-normal { margin: 15px 0;}
}
@media (min-width: 992px) {
.v-marg-small { margin: 15px 0;}
.v-marg-normal { margin: 20px 0;}
}
@media (min-width: 1200px) {
.v-marg-small { margin: 20px 0;}
.v-marg-normal { margin: 25px 0;}
}
另一方面,
处理您的内容时