栅格化布局

所谓栅格化布局，就是将网页的宽度按一定相同比例分开，不同的Div占不同的比例。

栅格系统就是来描述设置当前子元素在指定屏幕下，占据当前屏幕默认12等分中的n(1~12)等分

先添加容器 container/container-fluid在容器中添加 row在row中添加子元素，设置栅格样式在子元素添加具体内容

例如

设置当前div在xs屏幕下占据当前屏幕 12等分中的4等分

<div class="container"> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> </div>

由于Bootstrap的默认栅格一行为12份。 所以，当这样设置后，不管屏幕的分辨率如何，每一个占3/1。 每一行只显示三个。

其中

* w > 1200：lg large 大屏幕 * w：992~1200：md middle 中等屏幕 * w: 768~992: sm small 小屏幕 * w < 768:xs extra small 超小屏幕

例如

w < 768px 12等分 w 768~992 6等分 w 992~1200 4等分 w > 1200px 3等分 <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> </div>