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

css twitter-bootstrap

— 洛根W
source

Answers:

如果您在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以允许添加新的左边框。由于此规则在源顺序的后面出现，因此它将覆盖所有先前的声明或外部声明。

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

— j
source

使用“ margin：-1px;”怎么办？为“边界：1像素...”

— ymutlu

很老的解决方案。在当前的引导程序版本中无法正常运行。

— sandeep talabathula 2014年

今晚我遇到的另一个解决方案是添加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);

— 加藤
source

如果您将Twitter Bootstrap与LESS css实现一起使用，则实际上是一个混入。.box-sizing(border-box);

— 泰森·菲尔普

坦率的El Goog表示版本8及更高版本（支持91％）。

— 加藤

很棒的解决方案。为此表示

— 敬意

您能否澄清一下：应在哪个元素上应用该样式？TA

— superjos

最简单的答案是将这些属性放在自己的CSS类中，例如border-boxed。然后将它们应用于要添加边框的任何.span元素。例如，我可以使用<div class =“ span12 bordered border-boxed”>

— 加藤