Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

Spacing(スペーシング)

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

Margin and padding

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

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

Notation

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

クラスは,xs の場合は {property}{sides}-{size} という形式で smmdlgxlxxl の場合は {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: blockwidth が設定されているコンテンツを、水平方向の余白を 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つのサイズ( 05 )が含まれます。 .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
    ),