查看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.
