欄與欄的間距：Gutter

查看gutter的原始碼

• gutter的空間可以去做調整

可調整的 gutter

• .row的gutter x水平空間變數：預設--bs-gutter-x: 1.5rem;
• .row的gutter y垂直空間變數：預設--bs-gutter-y: 0;
• bs5使用 gx-{1-5} 屬性來調整水平間距
• g代表gutter
• x代表水平空間

運用情境

延伸:垂直gutter gy-*

• 加入欄與欄的垂直gutter gy-2
  
• 同時套用水平與垂直間距g-2
  

移除gutter的情況

中斷點情況

• 想到中斷點 -> 一律使用行動優先
• 行動版時間距為0
  
• 平板時間距切換成大的
  

行列式

• row-cols-{欄數}
• row-cols-3
  
• row-cols-2
  

行列式應用情境：加入中斷點

• row-cols-{中斷點}-{欄數}
  

  See the Pen 欄與欄的間距：Gutter by Sui Hsilan (@sui-hsialn) on CodePen.