解决bootstrap row span设置border换行的问题

Hadoop方面的毕业设计告一段落了，趁这几天空闲时间认真学习一下之前常使用但是却没用好的Bootstrap。
本文记录Bootstrap框架使用栅格系统时，遇到row内的span设置border换行的问题。

问题再现

<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>

截图：