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

簡介

柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就可以放入這些建立好的佈局中。

在v3版本中手機螢幕根據viewport分為4種，超小螢幕xs，小螢幕sm，中等螢幕md和大螢幕lg；

在v4版本中手機螢幕根據viewport分為5種，超小螢幕，小螢幕sm，中等螢幕md，大螢幕lg和超大螢幕xl；

1.列偏移

有的時候，我們不想讓兩個相鄰的列挨在一起，這時候利用柵格系統的列偏移（offset）功能來實現，而不必再定義margin值。使用.col-md-offset-*形式的樣式就可以將列偏移到右側。例如，.col-md-offset-4將.col-md-4向右移動了4個列的寬度：

實現此效果只需要在下一個列上應用offset樣式即可（因為該樣式設定的是margin-left）。
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

有多少個offset，就有多少個margin-left。
.col-md-offset-12 {  margin-left: 100%;}
.col-md-offset-11 {  margin-left: 91.66666666666666%;}
.col-md-offset-10 {  margin-left: 83.33333333333334%;}
.col-md-offset-9 {  margin-left: 75%;}
.col-md-offset-8 {  margin-left: 66.66666666666666%;}
.col-md-offset-7 {  margin-left: 58.333333333333336%;}
.col-md-offset-6 {  margin-left: 50%;}
.col-md-offset-5 {  margin-left: 41.66666666666667%;}
.col-md-offset-4 {  margin-left: 33.33333333333333%;}
.col-md-offset-3 {  margin-left: 25%;}
.col-md-offset-2 {  margin-left: 16.666666666666664%;}
.col-md-offset-1 {  margin-left: 8.333333333333332%;}
.col-md-offset-0 {  margin-left: 0;}