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>

截图：