Css 推特引导-边界

我刚开始使用Twitter引导，我有一个问题，关于如何最好地向父元素添加边框

例如，如果我有

 <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>

---

由于增加了边框的宽度，网格系统将中断并将

span3

踢到下一行……有没有一种好方法可以像这样在父级

中添加边框或填充物？

如果你在GitHub上查看Twitter自己的演示，你会得到一些关于在网格中使用边框的想法

例如，以下是构建块的提取部分到其940像素宽的16列网格系统：

.row{
缩放：1；
左边距：-20px；
}
.row>[class*=“span”]{
显示：内联；
浮动：左；
左边距：20px；
}
.span4{
宽度：220px；
}

为了允许在特定元素上添加边框，他们在页面中添加了嵌入式CSS，从而减少了足够多的匹配类，从而可以考虑边框

例如，为了允许侧边栏上的左边框，他们在主

后的

中添加了此CSS

.content.span4{
左边距：0；
左侧填充：19px；
左边框：1px实心#eee；
}

您将看到，他们将

padding left

减少了

1px

，以允许添加新的左边框。由于此规则在源代码顺序的后面出现，因此它将覆盖任何以前的声明或外部声明

---

我认为这并不是最稳健或最优雅的方法，但它说明了最基本的例子。

我今晚遇到的另一个解决方案，它满足了我的需要，就是添加

框大小属性：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

这些属性强制边框成为长方体模型宽度和高度的一部分，并纠正该问题

根据，IE8+支持
框大小调整

如果您使用较少或Sass，则有一个引导混入

减：

Sass：

如果你使用的是Twitter Bootstrap，它的css实现更少，那么它实际上是一个混合体<代码>框大小（边框框）宽宏大量的El Goog说（91%支持）。很棒的解决方案。你能澄清一下吗：这种风格应该应用在哪一个元素上？最简单的答案是将这些属性放在它们自己的CSS类中，例如
边框框
。然后将它们应用于要添加边框的任何.span元素。例如，对于“border:1px…”我可以有一个非常古老的解决方案，使用“margin:-1px；”怎么样。不适用于当前的引导版本。
.box-sizing(border-box);

@include box-sizing(border-box);