给Bootstrap 3列垂直边距

时间:2014-11-10 13:42:03

标签: html css twitter-bootstrap-3

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

示例:

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

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

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

由于

2 个答案:

答案 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;}
}

另一方面,

处理您的内容时

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