Question

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

Answer 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，以减少匹配类的数量，以便考虑边界。

Screenshot of Example Page

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

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

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

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

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

LESS：

.box-sizing(border-box);

萨斯：

@include box-sizing(border-box);

Twitter Bootstrap - 边框

2 个答案: