3-4 間隔 (Spacing)

一、間隔 (Spacing)

Bootstrap 包括各種簡寫響應式 margin、padding 的通用類別，可用來修改一個元素的外觀。

二、使用

1. 用於所有中斷點（從xs到xl）時，不需加入中斷點縮寫。這些 Class 將從 min-width: 0 及以上引用，不受 media query 的約束。但是其餘的就包含中斷點縮寫。對於 xs，使用固定格式 {property}{sides}-{size} 命名這些 Class，對於 sm、 md、lg 和 xl，使用格式 {property}{sides}-{breakpoint}-{size}。
2. 屬性 設定:

• m - 這個 class 會設定 margin
• p - 這個 class 會設定 padding

3. 邊緣 設定:

• t - 這個 class 會設定 margin-top 或 padding-top
• b - 這個 class 會設定 margin-bottom 或 padding-bottom
• l - 這個 class 會設定 margin-left 或 padding-left
• r - 這個 class 會設定 margin-right 或 padding-right
• x - 這個 class 會設定 *-left 和 *-right
• y - 這個 class 會設定 *-top 和 *-bottom
• 空白 - 如果邊緣 class 未加入則會設定 margin 或 padding 在元素的四個邊緣

4. 尺寸 設定:

• 0 - 這個 class 會設定 margin 或 padding 的樣式值為 0
• 1 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .25
• 2 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .5
• 3 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer
• 4 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 1.5
• 5 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 3
• auto - 這個 class 會設定 margin 為 auto