之前的布局都是固定了，不管实际页面的大小
如果要改成流动布局，只需要将 container 类改成 container-fluid 即可
然后把 row 类改成 row-fluid 所谓流动布局，就是其不再是固定像素大小，而采用了百分比
一旦改成了流动布局后，神奇的一幕就出现了，当我们去改变浏览器大小的时候，内容随着浏览器大小的变化而变化！！真棒！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap</title> <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css"> <script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script> <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../resources/js/html5.js"></script> <!--解决手机上的显示问题--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--解决IE低版本问题--> <!--[if lt IE9]> <script type="text/javascript" src="../../resources/js/html5.js"></script> <![endif]--> </head> <body> <div class="container-fluid"> <h1 class="page-header">布局 <small>使用BootStrap网格布局</small> </h1> <p>段落文字</p> <div class="row-fluid"> <div class="span4"> <h2 class="page-header">区块1</h2> <p>段落文字</p> </div> <div class="span4"> <h2 class="page-header">区块2</h2> <p>段落文字</p> </div> <div class="span4"> <h2 class="page-header">区块3</h2> <p>段落文字</p> <div class="row-fluid"> <div class="span6">布局的嵌套</div> <div class="span6">布局的嵌套</div> </div> </div> </div> </div> </body> </html>
注意：有一点区别，在嵌套布局中，嵌套元素的大小都是相对于其父容器而言的，所以区块3中的嵌套应该是span6，表示占用第二层布局的50%，而不再是原先的span2