Skip to main content Skip to docs navigation
View on GitHub

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 - 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: 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

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つのサイズ( 05 )が含まれます。 .gap-auto utility クラスは実質的に .gap-0と同じであるため、存在しません。