给Bootstrap 3列垂直边距

Question

我想知道，为Bootstrap 3列提供保证金的常用方法是什么。我可能不想破解Bootstrap CSS并想知道我是否应该应用其他类，或者是否有另一种好方法？

示例：

<div class="row">
   <div class="col-lg-6 v-margin">
      <!-- some content -->
   </div>
</div>

和

.v-margin {
   margin: 25px 0;
}

此外，我已经阅读了几次填充是首选，因为我不知道原因。任何人都可以提供快速建议吗？

由于

Answer 1

在这种情况下，你可以选择一个自定义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属性的固定宽度值中。

Answer 2

bootstrap有jumbotron和那些内部有大填充的井

• http://getbootstrap.com/components/#jumbotron
• http://getbootstrap.com/components/#wells

如果我们使用它们，那么我们必须覆盖它们的背景，因为它们在背景中使用颜色。但它们并不适合大型容器。

现在我们将转到下面的确切答案

我不这么认为是坏主意因为有时候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;}
}

另一方面，

处理您的内容时

1. 如果你完全放下你的div并且div有背景或边框
   然后通过给予保证金将看起来像第一个框。
2. 如果您有背景颜色或图像或div的边框 填充看起来像第二个框。 为了更好地理解，我已经附上了图像。