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> s像这个？
如果你看看Twitter自己在GitHub上的container-app.html演示，你会得到一些关于在他们的网格上使用边界的想法。
例如，这里是提取的部分构build块到他们的940像素宽的16列网格系统：
.row { zoom: 1; margin-left: -20px; } .row > [class*="span"] { display: inline; float: left; margin-left: 20px; } .span4 { width: 220px; }
为了允许特定元素的边界，他们将embedded的CSS添加到页面中，从而减less了匹配类的数量，从而占用边界。
例如，为了允许边栏上的左边框，他们将这个CSS添加到<head> <link href="../bootstrap.css" rel="stylesheet">之后的<head> <link href="../bootstrap.css" rel="stylesheet"> 。
.content .span4 { margin-left: 0; padding-left: 19px; border-left: 1px solid #eee; }
你会看到他们减less了1px padding-left的padding-left ，以允许增加新的左边界。 由于此规则稍后出现在源订单中，因此它将覆盖任何以前的或外部的声明。
我认为这不完全是最强健或最优雅的方法，但它是最基本的例子。
今晚我遇到的另一个解决scheme是为我的需要工作，就是增加box-sizing属性：
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
这些属性强制边框成为框模型宽度和高度的一部分，并纠正问题。
根据caniuse.com»盒子大小 ，IE8 +支持box-sizing 。
如果你使用LESS或者Sass，那么有一个Bootstrap mixin。
减：
.box-sizing(border-box);
萨斯：
@include box-sizing(border-box);
