Twitter Bootstrap用户 - 如何处理杂项垂直定位/间距?

时间:2014-12-18 09:11:08

标签: html css twitter-bootstrap sass

我正在使用Twitter Bootstrap和SASS。我使用前者主要是为了它的网格,我正在努力避免向行添加类似行内样式的属性作为控制垂直间距的方法,就像这样。 。

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

。 。 。基本上相当于此。 。

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

不好。你们有没有想出一个处理垂直定位/间距的系统,它不包含任何类似的东西?

1 个答案:

答案 0 :(得分:1)

如果.col-*-*内的.row内的孩子有p,h1-h6,ul,ol,那么你就不需要了:

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

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

enter image description here

如果情况并非如此,您可以制作最大宽度(因此您不必使用较大的视口样式并且必须撤消它)。

@media (max-width:767px) {

    .row {margin-top:5%;}

}

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