html - 给 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 应用 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，您将破坏 float 布局，因为 margin 位于宽度值旁边。

• 相反，当您添加 padding 时，它会包含在具有 box-sizing 属性的固定宽度值上。