為了方便起見，我們通過1200px寬的屏幕來講解bootstrap中container、row、col的css屬性值為何這樣設置的原理
在1200px屏幕中為何container的寬度設置為1170px?
為了在1200px寬的設備兩邊留出一定的邊距，因此將container的寬度設置為1170px，同時margin-left:auto和margin-right:auto將container居中，從而確保屏幕兩邊各留出15px的邊距；
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container {
padding-right: 15px;/*下文解釋為何padding設置為15px*/
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
為何col要留出15px的padding-left與padding-right？
為了創建柵格列與列之間的間隔(gutter)，因此將col的padding-left與padding-right均設置為15px；
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;/*下文解釋為何要設置position為relative*/
min-height: 1px;/*下文解釋為何min-height設置為1px*/
padding-right: 15px;
padding-left: 15px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
既然container左右兩邊都有15px的外邊距了，為何還要設計15px的內邊距呢？
原來，bootstrap通過將col看做一個容器，往里面再嵌入12個col(一個柵格系統)，以此實現嵌套列的功能，從而達到無限嵌套的目的；
因此從某種程度上，bootstrap把container當做一個最大的col(想象一下container中放一個col-12的情景，此時兩者的padding與width均一致)，所以container和col一樣，其padding-left和padding-right也均被設置成15px，從而達到container與col相統一的目的。
那為何bootstrap還設計了row，並且要求row必須包含在.container(固定寬度)中呢？
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
clear: both;/*用於清除浮動;*/
}
還記得，剛剛為了統一處理container與col而將container的左右內邊距設置為15px的操作嗎？由於bootstrap將所有元素的盒模型都設置為了boeder-box
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
上述15px的操作導致了container的content width從1170px，變成1140px，這下導致所有col柵格的百分比乘的都是1140而不是1170了；因此bootstrap在container中新增了row這個夾層，通過設置負值 margin從而抵消掉為 container 元素設置的 padding，使得row的寬度增加至1170px，從而使得col柵格的百分比乘的都是正確的1170；(也就間接為row所包含的col抵消掉了padding);
這里用到了盒模型尺寸的計算原理：塊元素左右外邊距、左右border、左右內邊距和content width這七個值之和必須等於包含塊的content width。row的包含塊container的content width為1140px，因此對於row而言，就存在如下等量關系：
-15px+0+0+width+0+0+（-15px）= 1140
因此，row的width就自動擴展到1170px了。
為何col要設置position為relative呢？
為了實現列定位或列排序
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
結合col的position為relative的屬性，通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
那為什么col要設置一個min-height為1px呢？
這是因為每個col為了保持占有自己的格子(就算沒有內容，也占該有的柵格)；如果不設置min-height為1px，在col沒有任何內容的情況下，后面有內容的col會float到前面沒有內容的col的柵格位置，這是我們不希望看到的。
好了，到這里我們就解釋了bootstrap的柵格系統中最重要的三個部分container、row和col它們樣式設置的原理。
另外，關於列偏移
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
列偏移與列排序(定位)的不同之處在於使用margin，而被margin擠占的區域沒辦法安放其它的列。
另外，關於流式布局容器
將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。