Bootstrap栅格系统，浮动，绝对定位

前言

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;}