間距

Bootstrap v4 CSS 包含了廣泛的回應式簡寫外框和填襯的公用程式類別，用於修改元件的外觀。

運作方式

使用簡寫類別，為元件或其部分的面向指定回應式友善的外框或填襯值。其中包含個別屬性、所有屬性，以及垂直和水平屬性的支援。這些類別是由一個範圍從 .25rem 到 3rem 的預設 Sass 映射建構出來的。

符記

適用于所有中斷點，從 xs 到 xl 的間距公用程式，在其中沒有中斷點縮寫符號。這是因為這些類別從 min-width: 0 開始套用，因此不受媒體查詢所約束。但其餘中斷點確實包含中斷點縮寫符號。

類別使用格式 {property}{sides}-{size} 命名，其中 xs 為 {property}{sides}-{breakpoint}-{size}，而 sm、md、lg 與 xl 為

其中屬性為下列之一

m - 設定外框的類別
p - 設定填襯的類別

其中面為下列之一

t - 設定 margin-top 或 padding-top 的類別
b - 設定 margin-bottom 或 padding-bottom 的類別
l - 設定 margin-left 或 padding-left 的類別

 x - 適用於設定 *-left 和 *-right 的類別
 y - 適用於設定 *-top 和 *-bottom 的類別
 空白 - 適用於在元素的四面設定 margin 或 padding 的類別

 其中 size 是下列其中之一
  0 - 適用於透過設定為 0 來取消間距或填滿的類別
 1 - (預設) 適用於將 margin 或 padding 設定為 $spacer * .25 的類別
 2 - (預設) 適用於將 margin 或 padding 設定為 $spacer * .5 的類別
 3 - (預設) 適用於將 margin 或 padding 設定為 $spacer 的類別
 4 - (預設) 適用於將 margin 或 padding 設定為 $spacer * 1.5 的類別
 5 - (預設) 適用於將 margin 或 padding 設定為 $spacer * 3 的類別
 
 (新增項目至 $spacers Sass 地圖變數，即可加入更多尺寸。)
 範例
 以下是這些類別的一些範例
 .mt-0 {
  margin-top: 0 !important;
}

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

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

.p-3 {
  padding: $spacer !important;
}
橫向置中
 此外，Bootstrap 也包含一個 .mx-auto 類別，透過將橫向間距設定為 auto，可以橫向置中定寬區塊層級的內容，也就是具有 display: block 和 width 設定的內容。
 <div class="mx-auto bg-info" style="width: 200px;">Centered element</div>

<!-- horizontal-centering.vue -->