View on GitHub

Spacing(スペーシング)

要素の外観を変更するための margin, padding, gap utility が含まれています。

On this page

Margin and padding

レスポンシブな margin や padding の値を要素などに適用します。単一のプロパティ、すべてのプロパティ、水平方向と垂直方向のプロパティをサポートしています。クラスは、.25rem から 3rem までの範囲のデフォルトの Sass マップから構築しています。

CSS Grid layout moduleを使用している場合は the gap utility の使用を検討してください。

Notation

xs から xxl までのすべてのブレークポイントに適用されるスペーシングユーティリティには、ブレークポイントの略語が含まれていません。これらのクラスは min-width: 0 以降に適用されるため、メディアクエリに縛られないからです。しかし、残りのブレークポイントにはブレークポイントの略語が含まれています。

クラスは，xs の場合は {property}{sides}-{size} という形式で sm、md、lg、xl、xxl の場合は {property}{sides}-{breakpoint}-{size} というクラスになります。

property は以下のいずれかです。

m - margin を設定するクラスの場合
p - padding を設定するクラス用

sides は以下のいずれかです。

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

size は以下のいずれかです。

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

($spacers Sass マップ変数を追加すればサイズを増やすことができます)

Examples

レスポンシブなサンプルになります：

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

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

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

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

Horizontal centering

Bootstrapには、ブロックレベルのコンテンツ、つまり display: block と width が設定されているコンテンツを、水平方向の余白を auto に設定することで水平方向にセンタリングするための .mx-auto クラスを用意しています。

Centered element

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

Negative margin

CSS では、ネガティブ margin を使うことができます( padding は利用できません）。これらのネガティブマージンはデフォルトでは無効になっていますが、Sassでは $enable-negative-margins: true を設定することで有効にすることができます。

構文はデフォルトのポジティブマージンユーティリティとほぼ同じですが、要求されたサイズの前に n を追加します。以下に .mt-1 の逆のクラスの例を示します。

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

Gap

When using display: grid, you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container). Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.

display：gridを使用する場合、親 Grid コンテナで gap utilities を利用できます。これにより、個々のグリッドアイテム（ display：grid コンテナの子）に margin utilities を追加する手間を省くことができます。 gap utilities はデフォルトでレスポンシブであり, $spacersSassマップに基づいて utilities API を介して生成されます。

Grid item 1

Grid item 2

Grid item 3

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

サポートには、Bootstrapのすべての Grid ブレークポイントに対するレスポンシブオプションと, $spacers マップからの6つのサイズ（ 0 – 5 ）が含まれます。 .gap-auto utility クラスは実質的に .gap-0と同じであるため、存在しません。