如何使用bootstrap柵格系統？

1.背景介紹

bootstrap內建了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕裝置或視口（viewport）尺寸的增加，系統會自動分為最多12列。

2、網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最後結合**查詢，就製作出了強大的響應式網格系統。bootstrap框架中的網格系統就是將容器平分成12份。

2.知識剖析

柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面布局，

你的內容就可以放入這些建立好的布局中。下面就介紹一下 bootstrap 柵格系統的工作原理：

「行（row）」必須包含在.container（固定寬度）或.container-fluid（100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。

通過「行（row）」在水平方向建立一組「列（column）」。

內容應當放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。

類似.row和.col-xs-4這種預定義的類，可以用來快速建立柵格布局。bootstrap 原始碼中定義的 mixin 也可以用來建立語義化的布局。

通過為「列（column）」設定padding屬性，從而建立列與列之間的間隔（gutter）。通過為.row元素設定負值margin從而抵消掉為.container元素設定的padding，也就間接為「行（row）」所包含的「列（column）」抵消掉了padding。

負值的 margin就是下面的示例為什麼是向外突出的原因。在柵格列中的內容排成一行。

柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個.col-xs-4來建立。

如果一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被作為乙個整體另起一行排列。

柵格類適用於與螢幕寬度大於或等於分界點大小的裝置，並且針對小螢幕裝置覆蓋柵格類。因此，在元素上應用任何.col-md-*柵格類適用於與螢幕寬度大於或等於分界點大小的裝置，並且針對小螢幕裝置覆蓋柵格類。因此，在元素上應用任何.col-lg-*不存在，也影響大螢幕裝置。