给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

.row您可以选择自定义 css，在这种情况下，如果您希望在列上使用相同的单独样式，我将在项目上应用类名，如下所示：

<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 属性的固定宽度值中。