上一篇我們學了如何在column上設定寬度與排版，事實上我們也可以用.row-cols-* 的類別快速設置想要內容與排版的列數。

Row-Cols

基本用法

寫法是直接在該.row上又加入.row-cols-1~12 類別，.row-cols接的數字代表一行裡面有幾個col。
如下:

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

上面範例.row-cols-2就是代表一行裡面有2個col，每個col寬度是12除以2等於6欄寬。
像下面這個.row-cols-3就是一行裡面有3個col，每個col寬度是4欄寬，於是最後一個col會換行(超過12欄寬)。

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

另外如果是.row-cols-auto就是為裡面的cols設定依照內容彈性改變寬度。
如下:

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

那如果row層是.row-cols-1~12，但裡面col有設定寬度的話，
例如下面:

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

因為row層是.row-cols-4，所以原本col都會是占3欄，但其中有一個col是.col-6占6欄，所以
最後一個col會被換到另一行。

剛剛三個範例程式碼在此CodePen中，可以自己玩玩看。

響應式row-cols

.row-cols-1~12也支持響應式，看以下程式碼:

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

意思是: 預設單欄；在sm以上時呈現兩欄排列，而md以上是四欄排列
此CodePen有範例程式碼，可玩玩看。

巢狀格線系統

col中也可以再放row，形成巢狀的格線系統。
例如:

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Gutter

Gutters 是欄與欄之間的間隙，經水平方向的 padding 產生，而最外的左右Gutter會用.row的負值margin消掉。一個Gutter預設是24px(1.5rem)，此外Gutter也會根據響應式斷點做調整。

我們可以在.row上加上.gx-*, .gy-*, .g-* 類別分別控制水平、垂直、水平以及垂直 Gutter 的寬度，數值是0~5，如果你想移除gutter，可以寫.g-0。
它的0~5的長度是這樣設定的:

$grid-gutter-width: 1.5rem; /*預設gutter寬是1.5rem(24px)*/
/*$spacer預設1rem(16px)*/
$gutters: (
  0: 0,
  1: $spacer * .25, /*4px*/
  2: $spacer * .5,  /*8px*/
  3: $spacer,  /*16px*/
  4: $spacer * 1.5, /*24px*/
  5: $spacer * 3, /*48px*/
);

之後會教如何自己調整設些變數設定，大家先不用緊張。

那麼gutter的寫法，例如:

<div class="container px-4">
<!--我控制水平gutter-->
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

響應式Gutter

可用.g-斷點-*來設定Gutter在甚麼斷點以上的寬度，也可以放在row-cols上。
例如:

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    ...
  </div>
</div>
  

上面Gutter的斷點設定是:預設(最小寬度時)是 g-2，而lg以上是 g-3的Gutter大小。

此CodePen請試著改變Gutter大小，觀察變化。