欄與欄的間距: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

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

#gutter






你可能感興趣的文章

[ Week 1 ] - Command Line

[ Week 1 ] - Command Line

Terminal 快捷鍵

Terminal 快捷鍵

API 串接的新手探險之旅 -- week 4 hw 1

API 串接的新手探險之旅 -- week 4 hw 1






留言討論