流式布局是一种自适应屏幕的设计方法，即不固定块的宽度，而是以百分比为单位来确定每一块的宽度。这种布局非常适合一次编写，然后自适应各种不同大小的屏幕，如智能手机、平板电脑等设备。

流式布局与固定式布局的结构和用法相同。例如：
<div class="container-fluid">
     <div class="row-fluid">
          <div class="span2"></div>
          <div class="span10"></div>
     </div>
     <div class="row-fluid">
          <div class="span2"></div>
          <div class="span10"></div>
     </div>
</div>

最外面包含容器是<div class="container-fluid">，定义container-fluid类，表明内容布局是流式布局，其主要作用是作为一个包含块来容纳流式布局内容。里面包含块的内容有 row-fluid类（非常重要），决定是不是流式布局。然后里面的内容块代码编写与网格系统一致，依然是从span1到span12，分别对应于不同的百分比。

<div class="container-fluid">是流式布局的容器，其源码如下：
.container-fluid {
     padding-right: 20px;
     padding-left: 20px;
     *zoom: 1;
}

容器左右各加了20px的内边距：
.container-fluid:before,
.container-fluid:after {
     display: table;
     line-height: 0;
     content: "";
}

清空了前后的内容，并且在后面清除了浮动：
.container-fluid:after {
     clear: both;
}

其实并非固定容器中只能配固定式栅格，流式容器只能配流式栅格，要视需要而定。例如，在下面的结构中，在流式栅格中插入了固定式布局。
<div class="container-fluid">
     <div class="row-fluid">
          <div class="span2"></div>
          <div class="span10"></div>
     </div>
     <div class="row">
          <div class="span2"></div>
          <div class="span10"></div>
     </div>
</div>