BOOTSTRAP CSS 網(wǎng)格是實(shí)現(xiàn)響應(yīng)式頁(yè)面設(shè)計(jì)的利器蜕窿，但至于它的工作原理谋逻，大多數(shù)時(shí)候?qū)﹂_(kāi)發(fā)人員應(yīng)該是一個(gè)黑盒。很少有人想知道它背后是如何工作的桐经。直到你自已設(shè)計(jì)的頁(yè)面無(wú)法滿足一個(gè)復(fù)雜的需求毁兆，或者設(shè)計(jì)出來(lái)的頁(yè)面顯示怎么也達(dá)不到你的預(yù)期。你真的會(huì)像丈二和尚摸不著頭腦阴挣。直到我看到了一篇國(guó)外開(kāi)發(fā)人員寫(xiě)的文章气堕，它提示了一些BOOTSTRAP 3.0框架中GRID的一些工作原理，這邊簡(jiǎn)單做一個(gè)歸納總結(jié)屯吊，供大家參考送巡。
容器 ( container)
- 容器的左內(nèi)邊距是15px，如下圖給粉紅部分顯示
-
容器的寬度動(dòng)態(tài)地取決于屏幕寬度
容器
行(row)
列column應(yīng)該包含在行row里面 盒卸，最多可添加到12的列骗爆。它還充當(dāng)包裝器，因?yàn)樗辛卸枷蜃蟾?dòng),如果浮動(dòng)異常蔽介，行與行之間也不會(huì)有重疊摘投。
行每邊都有15px的負(fù)邊距煮寡，如下圖中藍(lán)色所示。它正好抵消了外部容器的15px的左內(nèi)邊距犀呼。理解這點(diǎn)至關(guān)重要幸撕，有助于理解后續(xù)列 column的排列方式。以及自已設(shè)計(jì)的頁(yè)面布局出現(xiàn)異常的時(shí)候外臂。它使得行內(nèi)的列可以貼著屏幕邊距為起點(diǎn)坐儿，計(jì)算左內(nèi)邊距
不要在容器外使用行，那將不起作用
列(column)
-
列現(xiàn)在有15px的內(nèi)邊距宋光，以黃色顯示貌矿。這樣一來(lái)就可以做到2點(diǎn)：
- 兩側(cè)列沿著容器對(duì)齊（由于行的-15px)
- 列與列的內(nèi)容之間永遠(yuǎn)保持著30px的間隙
不要在行外使用列，那將不起作用
列的內(nèi)容
有了上述行和列的內(nèi)邊距互相抵消罪佳，這樣每一列的內(nèi)容逛漫，無(wú)管是最2邊的列，還是中間的列赘艳，對(duì)于整個(gè)屏幕來(lái)說(shuō)酌毡，都是平等對(duì)待的，同時(shí)還能控制在同一行當(dāng)中蕾管，即15px + ??px+ 15px的獨(dú)立單元枷踏，這便是container > row > column 的內(nèi)邊距設(shè)置的巧妙之處。
嵌套
可以在列中創(chuàng)建新的網(wǎng)格系統(tǒng)娇掏，記得只能在列中使用行呕寝，不能使用容器：
這樣外層列對(duì)于內(nèi)層行來(lái)說(shuō)，與最外層的容器與行來(lái)說(shuō)的關(guān)系是一樣的婴梧。
也就是說(shuō)此時(shí)下梢，列的作用與容器的作用相同，形成一個(gè)遞歸關(guān)系塞蹭。
偏移 （offset)
偏移比較好理解孽江，它只是將列的左外邊距增加相應(yīng)的若干個(gè)單位長(zhǎng)度。只唯一需要注意的是番电，針對(duì)最左側(cè)列進(jìn)行偏移時(shí)岗屏，偏移的起始位置，如下圖所示漱办，是從行的-15px外開(kāi)始的这刷。其實(shí)這也好理解，因?yàn)橥獠康男械钠鹗嘉恢檬?15px,畢竟內(nèi)邊距也屬于行的一部分娩井。而中間的列進(jìn)行偏移時(shí)暇屋，效果是將前一列與當(dāng)前列一分為二。
推和拉（push and pull)
為什么使用推/拉洞辣？根據(jù)屏幕尺寸的變大變小咐刨，翻轉(zhuǎn)當(dāng)前布局昙衅。
特別適用于將列重新排列，當(dāng)屏幕從移動(dòng)設(shè)計(jì)布局變到桌面設(shè)計(jì)定鸟，因?yàn)樗试S你在屏幕大小變動(dòng)時(shí)而涉，打破HTML默認(rèn)的：自頂向下，從左至右的布局方式联予。
特別需要注意的是啼县，pull和push實(shí)際上移動(dòng)了列的位置，而不是改變列的左右邊距躯泰，如下圖所示谭羔，這樣一來(lái)，如果push/pull一個(gè)列麦向，而不是push/pull其相鄰列的話，會(huì)出列與列內(nèi)容重疊在一起的情況客叉。
因此诵竭，每當(dāng)你pull/push一列的時(shí)候，相應(yīng)的鄰近的列也要做一個(gè)互補(bǔ)的push/pull的操作兼搏。
明白了網(wǎng)格系統(tǒng)的以上工作原理卵慰，我項(xiàng)目當(dāng)中頁(yè)面布局的異
常都得到了合理的解釋。如果覺(jué)得還是很難理解佛呻，那就切記要按照
container ->row ->column->row->column這種方式去組織界面的網(wǎng)格元素裳朋。
