Skip to main content Skip to docs navigation
GitHubで見る

余白

Spacing

要素の外観を変更するためのマージン、パディング、ギャップが含まれています。

項目

マージンとパディング

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

CSS Gridレイアウトモジュールを使用していますか? 代わりにthe gap utilityの使用を検討してください。

表記方法

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 - margin-topまたはpadding-topを設定します。
  • b - margin-bottomまたはpadding-bottomを設定します。
  • s - (start)LTRでmargin-leftまたはpadding-leftを、RTLでmargin-rightまたはpadding-rightを設定します。
  • e - (end)LTRでmargin-rightまたはpadding-right、RTLでmargin-leftまたはpadding-leftを設定します。
  • x - *-leftと*-rightの両方を設定します。
  • y - *-topと*-bottomの両方を設定します。
  • blank - 要素の四辺にmarginまたはpaddingを設定します。

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

  • 0 - marginまたはpaddingを0に設定することで削除します。
  • 1 - (デフォルトでは)marginまたはpaddingを$spacer * .25を設定します。
  • 2 - (デフォルトでは)marginまたはpaddingを$spacer * .5を設定します。
  • 3 - (デフォルトでは)marginまたはpaddingを$spacerを設定します。
  • 4 - (デフォルトでは)marginまたはpaddingを$spacer * 1.5を設定します。
  • 5 - (デフォルトでは)marginまたはpaddingを$spacer * 3を設定します。
  • auto - marginをautoに設定します。

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

例

以下はレスポンシブな例です。：

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

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

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

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

水平方向の中央揃え

Bootstrapには、固定幅のブロックレベルのコンテンツ、つまりdisplay: blockとwidthが設定されているコンテンツで、水平方向のマージンをautoに設定して、水平方向の中央揃えするための.mx-autoクラスもあります。

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

ネガティブマージン

CSSでは、marginプロパティは負の値を利用することができます（paddingはできません）。このネガティブマージンはデフォルトでは無効ですが、Sassでは$enable-negative-margins: trueを設定することで有効にすることができます。

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

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

ギャップ

display: gridやdisplay: flexを使用する場合、親要素のgapユーティリティを使用することができます。これにより、グリッドやフレックスコンテナの個々の子要素にマージンユーティリティを追加する手間を省くことができます。ギャップユーティリティはデフォルトでレスポンシブであり、Sassマップの$spacersに基づいて、ユーティリティAPIから生成されます。

Grid item 1
Grid item 2
Grid item 3
Grid item 4
html 
<div class="grid gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

Bootstrapのすべてのグリッドのブレイクポイントのレスポンシブオプションと、$spacersマップの6つのサイズ(0～5)をサポートしています。.gap-0と実質的に同じなので、.gap-autoユーティリティクラスはありません。

垂直方向のギャップ

row-gapは指定されたコンテナ内の子アイテム間の垂直方向のスペースを設定します。

Grid item 1
Grid item 2
Grid item 3
Grid item 4
html 
<div class="grid gap-0 row-gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

水平方向のギャップ

column-gapは指定されたコンテナ内の子アイテム間の水平方向のスペースを設定します。

Grid item 1
Grid item 2
Grid item 3
Grid item 4
html 
<div class="grid gap-0 column-gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

CSS

Sassマップ

余白ユーティリティはSassマップで宣言され、ユーティリティAPIで生成されます。

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

SassユーティリティAPI

余白ユーティリティは、ユーティリティAPIでscss/_utilities.scssで宣言されています。ユーティリティAPIの使い方はこちら

scss/_utilities.scss 
"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
),
// Gap utility
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),