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 - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) 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

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と同じであるため、存在しません。

Sass

Maps

Spacing utilities は Sass map で宣言され、utilities API で生成されます。

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API

Spacing utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),