Twitter Bootstrap - 边框答案

【问题标题】：Twitter Bootstrap - bordersTwitter Bootstrap - 边框
【发布时间】：2012-02-06 07:26:15
【问题描述】：

我刚开始使用 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 这样吗？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

如果您在 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，从而将匹配类减少了足够多的数量以考虑边框。

例如，为了允许侧边栏上的左边框，他们在主 <link href="../bootstrap.css" rel="stylesheet"> 之后的 <head> 中添加了这个 CSS。

.content .span4 {
    margin-left: 0;
    padding-left: 19px;
    border-left: 1px solid #eee;
}

您会看到他们将padding-left 减少了1px，以允许添加新的左边框。由于此规则出现在源顺序的后面，因此它会覆盖任何先前或外部声明。

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

【讨论】：

如何使用“边距：-1px;”对于“边框：1px ...”
相当老的解决方案。不适用于当前的引导程序版本。

【解决方案2】：

我今晚遇到的另一个解决方案可以满足我的需求，它是添加 box-sizing 属性：

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

这些属性强制边框成为盒子模型的宽度和高度的一部分，并且也纠正了这个问题。

根据caniuse.com » box-sizing，IE8+支持box-sizing。

如果您使用的是 LESS 或 Sass，则可以使用 Bootstrap mixin。

少：

.box-sizing(border-box);

萨斯：

@include box-sizing(border-box);

【讨论】：

如果你使用 Twitter Bootstrap 和他们的 LESS css 实现，实际上有一个混合。 .box-sizing(border-box);
宽宏大量的 El Goog 说 version 8 and up（91% 支持）。
很棒的解决方案。对此表示赞赏
您能否澄清一下：该样式应应用于哪个元素？助教
最简单的答案是将这些属性放在它们自己的 CSS 类中，例如 border-boxed。然后将它们应用于要添加边框的任何 .span 元素。例如，我可以有一个