Bootstrap用户手册——1.5 　默认网格系统

Bootstrap默认的网格布局（图1-1）包含12列，940像素宽，不支持响应式布局。加载响应式CSS文件后，网格布局会根据视口（viewport）宽度在724像素到1170像素之间伸缩。视口宽度小于767像素时，说明是平板电脑或更小的设备，布局中的列会垂直堆叠起来。默认宽度下，每列宽60像素，且向左平移20像素。图1-1展示了12列时的情况。 图1-1：默认的网格 1.5.1 　基本网格的HTML 创建简单布局时，给作为行的<div>添加.row类，给作为列的<div>添加表示横跨多少列的.span*类即可。因为网格布局可以包含12列，所以.span*中的*加起来必须等于12。这样，可以设计出3-6-3、4-8、3-5-4、2-8-2……布局，你懂了吧？ 下面的代码使用了.span8和.span4，总共横跨12列： <div class="row"> <div class="span8">...</div> <div class="span4">...</div> </div> 图1-2：平移列 1.5.3 　嵌套列 要嵌套列，只要在相应的.span*中再增加一个.row，然后在其中包含与父容器列数相等的.span*即可（见图1-3）： <div class="row"> <div class="span9"> Level 1 of column <div class="row"> <div class="span6">Level 2</div> <div class="span3">Level 2</div> </div> </div> </div> 图1-3：嵌套列