在Bootstrap中为跨度div添加边框会弄乱布局 [英] Adding borders to span divs in Bootstrap messes up layout
问题描述
我从Twitter Bootstrap开始，对布局如何起作用有疑问.这是HTML:
I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the 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:
style.css:
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
为span4和span8添加边框会增加它们的宽度，而我最终得到以下结果:
Adding border to span4 and span8 increases their width and I end up with this:
span4和span8堆叠在一起，而它们应该在同一行上.我知道我可以在.css文件中减小其宽度并更正此错误，或使用此错误:
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:
http://paulirish.com/2012/box-sizing-border-box-ftw/
但是Bootstrap提供了纠正此问题的方法(每次添加或删除边框时都不会添加额外的CSS等)
but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)
推荐答案
bootstrap中的span类具有特定的宽度，因此添加边框会抛出该行的总数，并迫使它们进行换行.为了解决这个问题，我通常将边框样式放在带有span类的div内的div上.像这样:
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:
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
这篇关于在Bootstrap中为跨度div添加边框会弄乱布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
