前言
Bootstrap通过.container确定屏幕宽度，其直接子元素只有.row,通过在.row里放入.col-md-*(1至12)的列元素，把.row平均分为12列。
- .container拥有15px的左右内边距
- .row拥有-15px的左右外边距，使得其刚好与.container的内边距抵消，使.row内的元素至左显示。
- .col-md-都拥有15px的左右内边距，使得已经嵌套的.col-md-元素由于已经确定了长度，便可以充当.container。实现栅格系统的扩展。
为了合理使用栅格系统，需要注意组合使用.container .row .col-md-*元素。
绝对定位，浮动
绝对定位或浮动的元素受其父亲元素的宽度约束，分为12份，依然使用.col-md-*表示。
为使绝对定位的元素其left和top属性刚好对应父亲元素的左上角为起点，其父亲元素应该设置position：relative;
绝对定位的元素会脱离文件流，同一父亲的所有绝对定位子元素都是相对父亲的左上角定位。
浮动的元素不脱离文件流。
实验代码
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-6 left">left</div>
<div class="col-md-6 right">right</div>
</div>
</div>
</div>
</div>
//样式代码
.container{background: red;}
.container>.row{position: relative;}
.left{background: blue;float: right;}
.right{background:beige;float:left;}