Bootstrap网格/栅格系统（行row与列column）

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

 超小屏幕（手机，小于 768px） 

 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）

//小屏幕（平板，大于等于 768px） 

@media (min-width: @screen-sm-min) { ... }

 //中等屏幕（桌面显示器，大于等于 992px） 

@media (min-width: @screen-md-min) { ... }

 //大屏幕（大桌面显示器，大于等于 1200px）

 @media (min-width: @screen-lg-min) { ... }

1.  Row必须包含在样式为.container或.container-fluid的容器中,其中.container-fluid宽度为100%，column必须包含在row内，而其它标签元素只有在column中。      

<div class="container">
    <div class="row">行</div>
</div>

2.  列column默认情况分为1－12列，列与列之间的间距可能padding 与margin的属性来调节。

col-lg-1    col-lg-12

<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-9"></div>
</div>

3.  列表示：

col-xs-# (<768px屏幕)  col-sm-# (>768px屏幕)  col-md-# (>992px屏幕)  col-lg- #(>1200px屏幕)  后面的#表示每一行占用的列数1-12之间，超出自动换行。

4.  列偏移：

col-xs(xm,md,lg)-offset-#  #表示偏移的列数12内。后面的内容会同样跟随偏移，超过了12列另起一行。

col-lg-offset-1   col-lg-offset-6

5. 列排序：

col-xs(xm,md,lg)-push-# 向右浮动   col-xs(xm,md,lg)-pull-# 向左浮动 原位置有内容会重叠在一起。

 col-lg-push-2    col-lg-pull-2

列嵌套：

列中可继续嵌套行。