html - Twitter Bootstrap 用户 - 你如何处理各种垂直定位/间距？

Question

我正在使用带有 SASS 的 Twitter Bootstrap。我主要将前者用于其网格，并且努力避免将类似内联样式的属性添加到行中作为控制垂直间距的一种方式，例如 . . .

.margin-top-15 {
  margin-top: 15px;
}

. . .基本上相当于这个。 . .

<div style="margin-top: 15px;"></div>

不好。你们有没有想出一个处理垂直定位/间距的系统，但不包含与上述类似的任何内容？

Answer 1

如果 .col-*-* 中的子元素在 .row 中有一个 p, h1-h6, ul, ol, form around them then you don’不需要任何东西:

https://jsbin.com/bojeje/1/edit

Bootstrap 的 CSS 在 p、h1-h6、form、ul、ol、table(我认为)、.panel 和 .well 上有顶部和底部边距。最后两个可能只是底部边距，您应该查看解压缩的 CSS 以了解您正在使用什么。

如果不是这种情况，您可以设置最大宽度(这样您就不会搞砸更大的视口(viewport)样式而不得不撤消它)。

@media (max-width:767px) {

    .row {margin-top:5%;}

}

即使在嵌套的 .row 情况下使用百分比或 ems 看起来也很不错。