在默认情况下，Bootstrap没有启用响应式布局特性。如果加入响应式布局CSS文件（bootstrap-responsive.css），栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。

响应式（即流式）栅格与固定式栅格的区别在于，每列的宽度是按照百分比来计算外围包裹的宽度的，看一下下面的源码：
row-fluid {
    width: 100%;
    *zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
     display: table;
     line-height: 0;
     content: "";
}
.row-fluid:after {
     clear: both;
}

定义容器的宽度完全填充包裹外围容器的宽度。
.row-fluid [class*="span"]:first-child {
     margin-left: 0;
}

清空第一列前面的边距，与固定式中的margin-left: -20px效果是一样的。
.row-fluid [class*="span"] {
   display: block;
   float: left;
   width: 100%;
   min-height: 30px;
   margin-left: 2.127659574468085%;
   *margin-left: 2.074468085106383%;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}

这里只关注与宽度有关的代码。上面代码中margin-left: 2.127659574468085%以百分比设置列的左边距（margin-left），约等于2.12%。以上面固定式中的940px为例来算下大约是多少像素：2.12%×940=19.928，与20px很接近。

下面的代码用来设置列的宽度（width），其中百分比也是按照固定式中的原则算得的。
.row-fluid .span12 { width: 100%;   *width: 99.94680851063829%;}
.row-fluid .span11 { width: 91.48936170212765%; *width: 91.43617021276594%;}
.row-fluid .span10 { width: 82.97872340425532%; *width: 82.92553191489361%;}
.row-fluid .span9 { width: 74.46808510638297%; *width: 74.41489361702126%;}
.row-fluid .span8 { width: 65.95744680851064%; *width: 65.90425531914893%;}
.row-fluid .span7 { width: 57.44680851063829%; *width: 57.39361702127659%;}
.row-fluid .span6 { width: 48.93617021276595%; *width: 48.88297872340425%;}
.row-fluid .span5 { width: 40.42553191489362%; *width: 40.37234042553192%;}
.row-fluid .span4 { width: 31.914893617021278% *width: 31.861702127659576%;}
.row-fluid .span3 { width: 23.404255319148934%; *width: 23.351063829787233%;}
.row-fluid .span2 { width: 14.893617021276595%; *width: 14.840425531914894%;}
.row-fluid .span1 { width: 6.382978723404255%; *width: 6.329787234042553%;}

基本的流式栅格HTML代码与固定宽度栅格系统用法大致相同，只需要将.row替换为.row-fluid就能让任何一行流动起来。应用于每一列的类不用改变，这样能方便地在流式与固定栅格之间切换。
<div class="row-fluid">
     <div class="span3">3</div>
     <div class="span6">6</div> 
     <div class="span3">3</div>
</div>

定义流式栅格的偏移方式与固定网格系统相同：给任何想要偏移的列添加.offset*即可。例如，设计如下结构的效果如图3-15所示。
<div class="row-fluid">
     <div class="span4">4</div>
     <div class="span4 offset4">4 offset 4</div>
</div>

 

例如，针对3.2.3节的模式示例，可以把它很轻松地转换为流式布局，代码如下，演示效果如图3-16所示。
<div class="container-fluid">
     <div class="hero-unit"></div>
     <div class="row-fluid">
          <div class="span2"></div>
          <div class="span7"></div>
          <div class="span3"></div>
     </div>
     <footer></footer>
</div>

 

不管是固定式栅格，还是流式栅格，它们都可以实现嵌套设计。但是，与固定栅格的嵌套有一点不同，流式栅格要求被嵌套的列数之和等于12。这是因为流式栅格使用百分比来设置每列的宽度。

例如，在下面的HTML结构中，通过流式栅格设计三层嵌套的布局效果，如图3-17所示。
<div class="container-fluid text-center">
     <div class="row-fluid">
          <div class="span12"> Fluid 12
               <div class="row-fluid">
                    <div class="span6"> Fluid 6
                         <div class="row-fluid">
                              <div class="span6">Fluid 6</div>
                              <div class="span6">Fluid 6</div>
                     </div>
               </div>
          <div class="span6">Fluid 6</div>
        </div>
     </div>
   </div>
</div>

 

在固定式布局里，栅格里套栅格的逻辑很简单，只需照着它们固定宽度来设计即可。在流式布局里，栅格里套栅格的逻辑就稍微复杂一点，不照固定宽度来计算，而照宽度百分比来计算。因此，在实际项目中，同样的栅格套栅格，流式布局里的栅格宽度会比固定式布局的宽一点。

在3.2.3节中我们介绍过，Bootstrap允许通过修改variables.less的参数值来自定义栅格系统，流式栅格系统同样可以进行类似的修改。修改后并重新编译Bootstrap来实现自定义栅格系统。如果添加新的列，需要同时修改grid.less，同样需要修改responsive.less来获得多设备兼容。