メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
GitHubで表示

スペーシング

Bootstrapには、要素の外観を変更するための、幅広いレスポンシブなマージン、パディング、ギャップのショートハンドユーティリティクラスが含まれています。

このページの内容

マージンとパディング

レスポンシブ対応のmarginまたはpadding値を、要素またはその側面のサブセットにショートハンドクラスで割り当てます。個々のプロパティ、すべてのプロパティ、垂直方向と水平方向のプロパティのサポートが含まれています。クラスは、.25remから3remまでのデフォルトのSassマップから構築されます。

CSSグリッドレイアウトモジュールを使用していますか？ 代わりにギャップユーティリティの使用を検討してください。

表記法

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の両方を設定するクラスの場合
  • 空白 - 要素の4つの側面すべてに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`に設定するクラスの場合

($spacers Sassマップ変数にエントリを追加することで、さらにサイズを追加できます。)

例

これらのクラスの代表的な例を次に示します。

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

水平方向の中央揃え

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

中央揃えされた要素
<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`ユーティリティを使用できます。これにより、グリッドまたはフレックスコンテナの個々の子にマージンユーティリティを追加する手間を省くことができます。ギャップユーティリティはデフォルトでレスポンシブであり、`$spacers` Sassマップに基づいて、ユーティリティAPIを介して生成されます。

グリッドアイテム 1
グリッドアイテム 2
グリッドアイテム 3
グリッドアイテム 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`マップ(0〜5)の6つのサイズが含まれています。`gap-auto`ユーティリティクラスはありません。これは、事実上`gap-0`と同じであるためです。

行ギャップ

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

グリッドアイテム 1
グリッドアイテム 2
グリッドアイテム 3
グリッドアイテム 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`は、指定されたコンテナの子アイテム間の水平方向のスペースを設定します。

グリッドアイテム 1
グリッドアイテム 2
グリッドアイテム 3
グリッドアイテム 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

スペーシングユーティリティは、`scss/_utilities.scss`のユーティリティAPIで宣言されています。ユーティリティ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
),