在行之间添加顶部空间

如何使用twitter引导框架将margin top添加到class="row"元素?


在Twitter引导中编辑或覆盖行是一个坏主意,因为这是页面脚手架的核心部分,您将需要没有顶部边距的行。

为了解决这个问题,改为创建一个新的类“顶级缓冲区”,添加您需要的标准边距。

.top-buffer { margin-top:20px; }

然后在需要顶部边距的行div上使用它。

<div class="row top-buffer"> ...

好,只是为了让你知道发生了什么,然后我修正了一些新的类,正如Acyra上面所说的那样:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

每当我想我做<div class="row top7"></div>

为了更好地响应,您可以添加margin-top:7%而不是5px ,例如:D


有时候,margin-top会导致设计问题:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

所以,我建议创建“边缘底部类”而不是“边缘顶部类”,并将它们应用到前一个项目。

如果您正在使用Bootstrap导入LESS Bootstrap文件,请尝试使用比例Bootstrap主题空间来定义边距底部的类:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  
链接地址: http://www.djcxy.com/p/15807.html

上一篇: add top space between rows

下一篇: navbar color in Twitter Bootstrap