Skip to main content Skip to docs navigation
View on GitHub

スペーシング Spacing

Bootstrapには、要素の外観を変更するための、幅広い短縮形のレスポンシブmargin、padding、gapユーティリティクラスが含まれています。

On this page

マージンとパディング

レスポンシブフレンドリーなmarginまたはpaddingの値を、短縮形クラスを使用して要素またはその辺のサブセットに割り当てます。個々のプロパティ、すべてのプロパティ、および垂直および水平プロパティのサポートが含まれます。クラスは、.25remから3remの範囲のデフォルトのSassマップから構築されます。

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

表記法

xsからxxlまでのすべてのブレークポイントに適用されるSpacingユーティリティには、ブレークポイントの省略形がありません。これは、これらのクラスが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 - 要素の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 * 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が設定されたコンテンツ）を水平方向に中央揃えするための.mx-autoクラスも含まれています。これは、水平marginをautoに設定することで実現されます。

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

負のマージン

CSSでは、marginプロパティは負の値を利用できます（paddingはできません）。これらの負のmarginはデフォルトで無効になっていますが、Sassで$enable-negative-margins: trueを設定することで有効にできます。

構文は、デフォルトの正のmarginユーティリティとほぼ同じですが、要求されたサイズの前にnを追加します。.mt-1の反対のクラスの例を次に示します。

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

ギャップ

display: gridまたはdisplay: flexを使用する場合、親要素でgapユーティリティを使用できます。これにより、gridまたはflex containerの個々の子にmarginユーティリティを追加する必要がなくなります。Gapユーティリティはデフォルトでレスポンシブであり、$spacers Sassマップに基づいて、utilities APIを介して生成されます。

Grid item 1
Grid item 2
Grid item 3
Grid item 4
html 
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

サポートには、Bootstrapのすべてのgridブレークポイントのレスポンシブオプションと、$spacersマップからの6つのサイズ（0～5）が含まれます。.gap-autoユーティリティクラスはありません。これは.gap-0と事実上同じだからです。

行ギャップ

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

Grid item 1
Grid item 2
Grid item 3
Grid item 4
html 
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

列ギャップ

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

Grid item 1
Grid item 2
Grid item 3
Grid item 4
html 
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

CSS

Sassマップ

Spacingユーティリティは、Sassマップを介して宣言され、その後utilities 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

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