在行之间添加顶部空间
如何使用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