所谓栅格化布局,就是将网页的宽度按一定相同比例分开,不同的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 < 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>