Twitter Bootstrap - 边框
Log*_*n W 69 css twitter-bootstrap
我刚刚开始使用Twitter Bootstrap,我有一个关于如何最好地为父元素添加边框的问题？
例如,如果我有
<div class="main-area span12">
<div class="row">
<div class="span9">
//Maybe some description text
</div>
<div class="span3">
//Maybe a button or something
</div>
</div>
</div>
如果我应用这样的边框:
.main-area {
border: 1px solid #ccc;
}
span3由于边框的宽度增加,网格系统将断开并下降到下一行......有没有一种好方法能够像父母<div>这样添加边框或填充等内容？
rjb*_*rjb 58
如果您在GitHub上查看Twitter自己的container-app.html演示,您将获得有关在网格中使用边框的一些想法.
例如,这里是构建块的提取部分到940像素宽的16列网格系统:
.row {
zoom: 1;
margin-left: -20px;
}
.row > [class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.span4 {
width: 220px;
}
为了允许特定元素的边框,他们将嵌入的CSS添加到页面中,以减少匹配类的数量,以便考虑边界.
例如,为了允许侧边栏上的左边框,他们<head>在main之后添加了这个CSS <link href="../bootstrap.css" rel="stylesheet">.
.content .span4 {
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
}
你会看到,他们已经减少了padding-left通过1px允许添加新的左边框.由于此规则稍后出现在源顺序中,因此它将覆盖任何先前或外部声明.
我认为这不是最强大或最优雅的方法,但它说明了最基本的例子.
Kat*_*ato 47
我今晚遇到的另一个解决方案就是添加box-sizing属性:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
这些属性强制边框成为框模型的宽度和高度的一部分,并纠正问题.
根据caniuse.com»box-sizing,box-sizingIE8 +支持.
如果你正在使用LESS或Sass,那么就有一个Bootstrap mixin.
减:
.box-sizing(border-box);
萨斯:
@include box-sizing(border-box);
- 如果你使用Twitter Bootstrap和他们的LESS css实现,那么实际上就是混合.`.box的上浆(边界盒);` (9认同)