前言

Bootstrap通過.container確定屏幕寬度，其直接子元素只有.row,通過在.row里放入.col-md-*(1至12)的列元素，把.row平均分為12列。

• .container擁有15px的左右內(nèi)邊距
• .row擁有-15px的左右外邊距，使得其剛好與.container的內(nèi)邊距抵消，使.row內(nèi)的元素至左顯示。
• .col-md-都擁有15px的左右內(nèi)邊距，使得已經(jīng)嵌套的.col-md-元素由于已經(jīng)確定了長度，便可以充當(dāng).container。實現(xiàn)柵格系統(tǒng)的擴展。

為了合理使用柵格系統(tǒng)，需要注意組合使用.container .row .col-md-*元素。

絕對定位，浮動

絕對定位或浮動的元素受其父親元素的寬度約束，分為12份，依然使用.col-md-*表示。

為使絕對定位的元素其left和top屬性剛好對應(yīng)父親元素的左上角為起點，其父親元素應(yīng)該設(shè)置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;}