twitter-bootstrap 在 Bootstrap 中为 span div 添加边框会弄乱布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12922858/
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
Adding borders to span divs in Bootstrap messes up layout
提问by Anonimista
I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:
我从 Twitter Bootstrap 开始，并有一个关于布局如何在其中运行的问题。这是 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row">
<div class="span12">c</div>
</div>
</div>
</body>
</html>
style.css:
样式.css：
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
Adding border to span4 and span8 increases their width and I end up with this:
向 span4 和 span8 添加边框会增加它们的宽度，最后我得到了这个：
span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:
span4 和 span8 堆叠在一起，而它们应该在同一条线上。我意识到我可以在我的 .css 文件中减少它们的宽度并纠正它，或者使用这个：
http://paulirish.com/2012/box-sizing-border-box-ftw/
http://paulirish.com/2012/box-sizing-border-box-ftw/
but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)
但是 Bootstrap 是否提供了纠正此问题的方法（每次添加或删除边框等时都不会添加额外的 CSS）
回答by joshb
The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:
bootstrap 中的 span 类具有特定的宽度，因此添加边框会丢弃该行的总数并强制它们换行。为了解决这个问题，我通常将边框样式放在带有 span 类的 div 内的 div 上。像这样的东西：
HTML
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
回答by jodyfanning
I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.
我遇到了完全相同的问题，玩盒子尺寸根本没有帮助。最后对我有用的唯一解决方案是使用row-fluid.
The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.
与 row-fluid 的区别在于它们基于百分比，而不是固定像素。然后在一行中的子跨度总是加起来为 12，而不是在正常像素宽度行中加起来为其父跨度宽度。
So for example yours would now be
所以例如你现在将是
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row-fluid">
<div class="span12">c</div>
</div>
</div>
Now you don't get any issues with changing margins, paddings, or borders.
现在，更改边距、填充或边框不会有任何问题。
回答by Scott Hillson
It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.
听起来您希望您的 div 保持在同一条线上，是吗？为此，您必须指定宽度并浮动它们。Div 往往总是希望堆叠在一起。
Here's a fiddle: http://jsfiddle.net/me73v/
这是一个小提琴：http: //jsfiddle.net/me73v/
回答by Tony Smith
Another option would be to tweak the span widths with JQuery:
另一种选择是使用 JQuery 调整跨度宽度：
$(".some-bordered-container [class*=span] ").each(function(index) {
$(this).width($(this).width()-1);
});
It seems to work well for me. I don't miss the pixels.
这对我来说似乎很有效。我不会错过像素。
回答by Michael Baudino
You may also use negative margins :
您也可以使用负边距：
div.span4, div.span8, div.span12
{
background-color: #eee;
border: 1px solid #888;
border-radius: 3px;
margin: -1px;
}
It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.
box-sizing: border-box恕我直言，这不是一个好的解决方案，但值得注意的是，如果您被迫使用box-sizing: content-box.
