柵格系統用于通過行（row）和列（column）組合創建頁面布局，內容可以放入創建好的布局中。

Bootstrap柵格系統的工作原理：

“行（row）”必須包含在 .container中，以便為其賦予合適的排列（aligment）和內補（padding）通過    點container可以將界面放入瀏覽器的中間位置。

使用“行（row）”在水平方向創建一組“列（column）”。

你的內容應當放置于“列（column）”內，而且，只有“列（column）”可以作為行（row）”的直接子元素。

類似Predefined grid classes like .row and .col-xs-4 這些預定義的柵格class可以用來快速創建柵格布局。Bootstrap源碼中定義的mixin也可以用來創建語義化的布局。

通過設置padding從而創建“列（column）”之間的間隔（gutter）。然后通過為第一和最后一樣設置負值的margin從而抵消掉padding的影響。

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

根據不同的屏幕情況選擇不同的前綴  小屏幕設備 (<768px)使用.col-xs- 格式大小  

小屏幕設備 平板 (≥768px)  .col-sm-

中等屏幕設備 桌面 (≥992px)   .col-md- 

大屏幕設備 桌面 (≥1200px)   .col-lg-

12列式：每格60PX間距為20PX（最常用）一般為336或者363等等

16列式：每格40PX 間距為20PX

24列式：每格30PX 間距為20PX

32列式：每格20PX 間距為20PX

不同的內容使用相應的格式，在同樣的列中使用不同的前綴效果不同大的相對小的是堆疊的而小的相對大的是平面的并排的如果在使用小屏幕的時候堆疊在一起了么可以使用超小屏幕來實現那么他就不會堆疊了

列偏移：使用.col-md-offset-大小 可以將列偏移到右側。使用*選擇器將所有列增加了列的左側margin

例如 .A .col-md-offset-3  將A 向左側偏移3格

同樣在這里面也可以使用嵌套方式去完成不同的格式