Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Spacing (スペーシング)

Bootstrap には、ボックスモデルを変更するためのレスポンシブ margin と paddin ユーティリティを用意しています。

目次

How it works

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

Notation

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

クラスは,xs の場合は {property}{sides}-{size} という形式で smmdlgxlxxl の場合は {property}{sides}-{breakpoint}-{size} というクラスになります。

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

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

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

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

Examples

スペーシングクラスを使ったレスポンシブなサンプルになります:

.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;
}

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;
}