柵格系統用于通過一系列的行（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-*` 不存在， 也影響大屏幕設備。