間隔 (Spacing)

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

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

如何運作

賦予一個縮寫 class 使 marginpadding 值在一個元素上或其中一個邊緣上 (包含響應式)。包含支援單一個邊緣屬性或全部邊緣、垂直邊緣、水平邊緣上。Class 來自於 Sass map,範圍從.25rem3rem

符號

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

用於所有中斷點(從xsxl)時,不需加入中斷點縮寫。這些 Class 將從 min-width: 0 及以上引用,不受 media query 的約束。但是其餘的就包含中斷點縮寫。

對於 xs,使用固定格式 {property}{sides}-{size} 命名這些 Class,對於 smmdlgxl,使用格式 {property}{sides}-{breakpoint}-{size}

屬性 設定:

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

邊緣 設定:

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

尺寸 設定:

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

(你也可以對 $spacers Sass map 調整變數。)

範例

以下是這些 class 的一些代表性範例:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

水平中心

此外,Bootstrap 也包括一個 .mx-auto,用於固定寬度盒模型的水平置中,是具有 display: blockwidth 集合的內容,並將水平 margin 設置為auto

Centered element
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>