CSS Twitter Bootstrap - 边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8793876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap - borders
提问by Logan W
I just started using Twitter Bootstrap, and I have a question about how to best add a border to a parent element?
我刚开始使用 Twitter Bootstrap，我有一个关于如何最好地向父元素添加边框的问题？
for instance, if I have
例如，如果我有
<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>
If I apply a border like so:
如果我像这样应用边框：
.main-area {
border: 1px solid #ccc;
}
The grid system will break and kick span3down to the next row because of the added width of the border......Is there a good way to be able to add things like borders or padding to the parent <div>s like this?
span3由于边框增加了宽度，网格系统将中断并向下排到下一行......有没有什么好方法可以像这样向父对象添加边框或填充之类<div>的东西？
采纳答案by rjb
If you look at Twitter's own container-app.htmldemo on GitHub, you'll get some ideas on using borders with their grid.
如果您在 GitHub 上查看 Twitter 自己的container-app.html演示，您将获得一些关于在网格中使用边框的想法。
For example, here's the extracted part of the building blocks to their 940-pixel wide 16-column grid system:
例如，这是构建块的提取部分到其 940 像素宽的 16 列网格系统：
.row {
zoom: 1;
margin-left: -20px;
}
.row > [class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.span4 {
width: 220px;
}
To allow for borders on specific elements, they added embedded CSS to the page that reduces matching classes by enough amount to account for the border(s).
为了允许特定元素上的边框，他们在页面中添加了嵌入式 CSS，以减少足够数量的匹配类来解释边框。
For example, to allow for the left border on the sidebar, they added this CSS in the <head>after the the main <link href="../bootstrap.css" rel="stylesheet">.
例如，为了允许侧边栏的左边框，他们<head>在 main 之后添加了这个 CSS <link href="../bootstrap.css" rel="stylesheet">。
.content .span4 {
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
}
You'll see they've reduced padding-leftby 1pxto allow for the addition of the new left border. Since this rule appears later in the source order, it overrides any previous or external declarations.
您会看到它们减少padding-left了1px以允许添加新的左边框。由于此规则出现在源代码顺序的后面，因此它会覆盖任何先前的或外部声明。
I'd argue this isn't exactly the most robust orelegant approach, but it illustrates the most basic example.
我认为这并不是最健壮或最优雅的方法，但它说明了最基本的例子。
回答by Kato
Another solution I ran across tonight, which worked for my needs, was to add box-sizingattributes:
我今晚遇到的另一个解决方案是添加box-sizing属性：
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
These attributes force the border to be part of the box model's width and height and correct the issue as well.
这些属性强制边框成为盒子模型的宽度和高度的一部分，并纠正这个问题。
According to caniuse.com ? box-sizing, box-sizingis supported in IE8+.
根据caniuse.com ? box-sizing, box-sizingIE8+ 支持。
If you're using LESS or Sass there is a Bootstrap mixin for this.
如果您使用的是 LESS 或 Sass，则可以使用 Bootstrap mixin。
LESS:
较少的：
.box-sizing(border-box);
Sass:
萨斯：
@include box-sizing(border-box);
