Bootstrap 栅格系统

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

row(行)必须包含在.container(固定宽度)或 .container-fluid (100% 宽度)中
column(列)必须放在.row内

实例

css

	div{
	   border: 1px solid #000;
	}

html

    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>

效果：

在.row中，bootstrap设置了content为空的伪元素，并设置了display:block，使.row的盒子模仿出了表格相同的特性，最直观的效果就是获得了列的高度

这是没有设置.row的情况

列通过padding来设置内容的间隙，值都是15px

同时在.row上margin取负值，变相抵消了两边的padding值

如果行中包含的列超出了12，多余的元素将另起一行排列

栅格参数

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12

列偏移

通过.col-md-offset-* 类可以将列向右侧偏移

这里col-md-offset-1使.col-md-3向右偏移了一个列的宽度

	<div class="row">
        <div class="col-md-3 col-md-offset-1">.col-md-3</div>
    </div>

列排序

通过 .col-md-push-* 和 .col-md-pull-* 类改变列的顺序

	<div class="row">
	        <div class="col-md-1 col-md-push-2">左</div>
	        <div class="col-md-2 col-md-pull-1">右</div>
	</div>

push 和 pull 直译过来就是 推 和 拉
push-* 即向右 “推” * 个列的距离，pull-* 即向左 “拉” * 个列的距离