我从 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>
样式.css：
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
向 span4 和 span8 添加边框会增加它们的宽度，最终得到以下结果：
span4 和 span8 堆叠在一起，而它们本应位于同一行。我意识到我可以在 .css 文件中减小它们的宽度并纠正这个问题，或者使用这个：
http://paulirish.com/2012/box-sizing-border-box-ftw/ http://paulirish.com/2012/box-sizing-border-box-ftw/
但 Bootstrap 是否提供了纠正此问题的方法（不在每次添加或删除边框等时添加额外的 CSS）
Bootstrap 中的跨度类具有特定的宽度，因此添加边框会导致行总数丢失并强制它们换行。为了解决这个问题，我通常将边框样式放在带有 span 类的 div 内的 div 上。像这样的事情：
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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
