在 GitHub 上檢視

間距

Bootstrap 包含廣泛的簡寫式回應式邊界和內距工具程式類別，用於修改元素的外觀。

運作方式

使用簡寫式類別，將回應式友善的 margin 或 padding 值指派給元素或其部分邊側。包含對個別屬性、所有屬性以及垂直和水平屬性的支援。類別建構自預設的 Sass 地圖，範圍從 .25rem 到 3rem。

符號

適用於所有中斷點（從 xs 到 xl）的間距工具程式，其類別名稱中沒有中斷點縮寫。這是因為這些類別從 min-width: 0 開始套用，因此不受媒體查詢約束。然而，其餘的中斷點確實包含中斷點縮寫。

類別使用格式 {property}{sides}-{size}（適用於 xs）和 {property}{sides}-{breakpoint}-{size}（適用於 sm、md、lg 和 xl）來命名。

其中屬性之一為

m - 設定 margin 的類別
p - 設定 padding 的類別

其中邊緣之一為

t - 設定 margin-top 或 padding-top 的類別
b - 設定 margin-bottom 或 padding-bottom 的類別
l - 設定 margin-left 或 padding-left 的類別
r - 設定 margin-right 或 padding-right 的類別
x - 設定 *-left 和 *-right 的類別
y - 設定 *-top 和 *-bottom 的類別
空白 - 設定元素四個邊緣的 margin 或 padding 的類別

其中大小之一為

0 - 設定 margin 或 padding 為 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 的類別
auto - 設定 margin 為自動的類別

(您可以透過將項目新增到 $spacers Sass 地圖變數來新增更多大小。)

範例

以下是這些類別的一些代表性範例

.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: block 和 width 的內容，透過將水平邊界設定為 auto 來達成。

置中的元素

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

負邊界

在 CSS 中，margin 屬性可以使用負值 (padding 不行)。從 4.2 版開始，我們已針對上面列出的每個非零整數大小 (例如 1、2、3、4、5) 新增負邊界公用程式。這些公用程式非常適合自訂網格欄位間距。

語法與預設的正邊界公用程式幾乎相同，但請求的大小之前會新增 n。以下是一個與 .mt-1 相反的範例類別

.mt-n1 {
  margin-top: -0.25rem !important;
}

以下是一個在中型 (md) 斷點及以上自訂 Bootstrap 網格的範例。我們使用 .px-md-5 增加 .col 的內距，然後在父 .row 上使用 .mx-md-n5 來抵消它。

自訂欄位內距

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>