柵格系統(tǒng)的使用其實就是柵格的列的不同組合方式.

• 列的組合
  上代碼:
  <div class='container'>
  <div class='row'>
  <div class='col-md-1'>1</div>
  .......省略10個跟上面一樣的div
  <div class='col-md-1'>12</div>
  </div>
  <div class='row'>
  <div class='col-md-8'>1</div>
  <div class='col-md-4'>2</div>
  </div>
  <div class='row'>
  <div class='col-md-6'>1</div>
  <div class='col-md-6'>2</div>
  </div>
  </div>
  上面的代碼總共有三行,第一行有12列,第二行有兩列,第三行有兩列,但是第二行和第三行的列寬度是不一樣的.

• 列偏移
  有時候我們不想讓兩塊內(nèi)容連在一起,這時候可以用柵格系統(tǒng)的偏移來實現(xiàn).在bootstrap中定義一系列的col-md-offset-*形式的樣式來實現(xiàn)偏移效果.
  上代碼:
  <div class='container'>
  <div class='row'>
  <div class='col-md-4'>第一列</div>
  <div class='col-md-4 col-md-offset-4'>第二列</div>
  </div>
  </div>
  上面的代碼只有兩列,第一列靠最左邊,第二列在行的最右面,中間相差4個柵格.
  實際上col-md-offset-4是通過margin-left來實現(xiàn)的
  例如: col-md-offset-4的源碼是這樣的
  .col-md-offset-4{margin-left:33.333333333333333%;}

• 列嵌套
  柵格系統(tǒng)也支持列嵌套,也就是在一個列里面再添加一個row.
  上代碼:
  <div class='container'>
  <div class='row'>
  <div class='col-md-9'>
  這是第一列
  <div class='row'>
  <div class='col-md-6'>第一列里面嵌套的行的第一列</div>
  <div class='col-md-6'>第一列里面嵌套的行的第二列</div>
  </div>
  </div>
  <div class='col-md-3'>第二列</div>
  </div>
  </div>
  需要知道在列里面嵌套的行也是按照柵格系統(tǒng)分成12列的,只是每一列與外面的列寬度不一樣,這是因為柵格系統(tǒng)每一列的寬度是根據(jù)百分比來指定的.