繼上篇說明了Bootstrap排版三劍客:container(容器), row(橫列), column(直欄)之後，今天這篇我們來學格線系統Column的用法。

格線系統重點

在學習格線系統寫法之前，請務必記得:

1. 最外層要一定要有container，container裡面可以不只放row(例如你可以放h1等其他元素)
2. row裡面一定只能是col
3. col的外層只能是row
4. 而內容或是元件的則是放在col裡面
5. Columns 的網格主要建立於flexbox上。

格線系統Column排版寫法

一、自動排版、平均分布的col

我們先從基本的開始:

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

這個範例程式碼最外面是一個container，裡面有一個row，row裡面有三個col。
如果你col後面沒寫數字，col在row中會是平均分布地呈現。例如上面範例就是自動平均分布成三欄。
P.S.預設col超過12會自動換行，因為row 自帶了.flex-wrap。
這個CodePen可以自行加減col來玩玩看，
而且你會發現它是支持響應式的，也是那六個斷點:
極小 (xs)、小 (sm)、中 (md)、大 (lg)、特大 (xl)、超級大 (xxl)。

二、可以自訂跨幾欄的col

你也可以自己設定這個欄的寬度，使用col-1~12的寫法。
如下:

<div class="container">
  <div class="row">
    <div class="col">
      我占了三欄的寬度
    </div>
    <div class="col-6">
     我佔了六欄的寬度
    </div>
    <div class="col">
     我占了三欄的寬度
    </div>
  </div>
</div>

以上的範例程式碼，row中只有一個.col-6，其他是自動排版的.col，所以各欄寬度是這麼算的:
原本總欄數是12，.col-6自己就占6欄，剩下6欄讓兩個.col去分，一個.col就占3欄。
阿如果裡面column總欄數超過12也是會換行的喔!
實際運用在網站的話例如側邊欄是.col-3，而主要區域是.col-9這樣子，蠻方便的。
此範例CodePen也可以玩玩看。

有斷點的col

如果你想要讓某個有指定寬度的column在小於某斷點是自己獨占一行(width:100%)，而在斷點以上(有包含斷點)是你指定的寬度就可以使用.col-斷點-1~12，例如以下範例:

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

上面第一個row中的.col-sm-8會在小於sm(<576px)是自己獨佔一行的，大於等於sm就會占8欄；
.col-sm-4會在小於sm(<576px)是自己獨佔一行的，大於等於sm就會占4欄。
第二個row中的.col-sm在小於sm(<576px)也是自己獨佔一行的，而在大於等於sm時就會跟.col一樣自動排版平均分布。
此CodePen可以自己加入其它斷點玩玩看，也可以注意有加斷點的col跟col的差別。

最後這裡有個小問題:
1.我想要在手機版呈現滿寬(100%)，在PC版(lg以上)呈現一個三欄、一個九欄的排版應該怎麼做?
2.我要在手機版呈現滿寬(100%)，md以上呈現兩欄排列，在PC版以上呈現4欄排列該怎麼做?

寫在此CodePen中，裡面有附答案。

參考:
30 天轉生到 bootstrap 5 的意識界系列第 8 集：Gird System 格線系統