Bootstrap 流式栅格系统

Bootstrap的默认栅格系统没有启用响应式布局，如果加入响应式布局的CSS文件bootstrap-responsive.css，栅格系统会自动根据视口（viewport）宽度，在 724px 到 1170px 进行动态调整。当视口宽度小于 767px 时，这些列将采用流式布局，并在垂直方向堆叠。

流式栅格系统对每一列的宽度定义使用百分比，而不是像素。流式网格系统与固定网格系统一样都具有响应能力，这就保证它能对不同的分辨率和设备做出适当的调整。流式栅格系统如图 2‑4所示：

图2-4 Bootstrap流式栅格系统

只要把某一行的 .row 改为 .row-fluid，就能让任何一行“流动”起来。考虑到流式栅格与固定栅格之间的自由切换，默认栅格系统和流式栅格系统中的列，使用的类是相同的。

流式栅格也包含 12 列，所以 .span* 中的 * 加起来也必须等于 12（或者等于其父容器的栅格数）。如：

1. <div class="row-fluid">
2.   <div class="span4">...</div>
3.   <div class="span8">...</div>
4. </div>

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。