我正在参加「掘金·启航计划」
Hadoop 方面的毕业设计告一段落了，趁这几天空闲时间认真学习一下之前常使用但是却没用好的Bootstrap。
本文记录Bootstrap框架使用栅格系统时，遇到row内的span设置border换行的问题。
问题再现
这里设置一行两个 span 容器，宽度比为一比二，由于最大的 span 数量为 12，所以最终的分配是 span4 和 span8。 代码如下：
<style>
.row div{
border:solid 1px #eee;
}
</style>
<div class="container">
<div class="row">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
</div>
使用 CSS 为row里面的span设置边框后会导致最后一个span换行，原因是栅格系统写死了span的宽度，并且使用float的方式排列row内的sapn，加上边框后会导致宽度增加，所以最后会自动换行。
解决方案
方案一
尽量不修改网格的样式的前提下，避免自定义CSS与Bootstrap的栅格系统产生冲突：
<style>
.span4 > div, .span8 > div
{
border: 1px solid #888;
}
</style>
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
方案二
使用 row-fluid 代替 row，来避免自动换行。
<style>
.row-fluid div{
border:solid 1px #eee;
}
</style>
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
</div>
方案对比
下面在同一个页面，对比两种方案的代码和最终效果：
<style type="text/css">
.span4 > div,
.span8 > div {
background: #0088CC;
text-align: center;
color: #fff;
border: 1px solid #888;
}
.row-fluid div {
background: #0088CC;
text-align: center;
color: #fff;
border: solid 1px #eee;
}
</style>
<div class="container">
<hr>
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
<hr>
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
</div>
截图：
如果有什么建议或者问题可以随时联系我，共同探讨学习：
