スペーシング

仕組み

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

表記

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

クラスの名前は、xsの場合は{property}{sides}-{size}、sm、md、lg、およびxlの場合は{property}{sides}-{breakpoint}-{size}の形式を使用して付けられます。

ここで、*property*は次のいずれかです。

• m - マージンを設定するクラスの場合
• p - パディングを設定するクラスの場合

ここで、*sides*は次のいずれかです。

• t - margin-topまたはpadding-topを設定するクラスの場合
• b - margin-bottomまたはpadding-bottomを設定するクラスの場合
• l - margin-leftまたはpadding-leftを設定するクラスの場合
• r - margin-rightまたはpadding-rightを設定するクラスの場合
• x - *-leftと*-rightの両方を設定するクラスの場合
• y - *-topと*-bottomの両方を設定するクラスの場合
• 空白 - 要素の4つの側面すべてにmarginまたはpaddingを設定するクラスの場合

ここで、*size*は次のいずれかです。

• 0 - マージンまたはパディングを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に設定するクラスの場合

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

例

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

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

.ml-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には、水平方向のマージンをautoに設定することにより、固定幅のブロックレベルのコンテンツ(つまり、display: blockとwidthセットを持つコンテンツ)を水平方向に中央揃えするための.mx-autoクラスも含まれています。

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

<!-- horizontal-centering.vue -->