GitHub で確認

スペース調整

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

動作方法

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

表記法

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

クラスは、xsの場合は{property}{sides}-{size}、sm、md、lg、xlの場合は{property}{sides}-{breakpoint}-{size}の形式で命名されます。

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

  • m - marginを設定するクラス
  • p - paddingを設定するクラス

ここで、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 - 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;
}

.ml-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" style="width: 200px;">
  Centered element
</div>

負のマージン

CSSでは、marginプロパティは負の値を使用できます（paddingは使用できません）。4.2以降、上記のゼロ以外のすべての整数サイズ（例：1、2、3、4、5）について、負のマージンユーティリティを追加しました。これらのユーティリティは、ブレークポイント間でグリッド列のガターをカスタマイズするのに最適です。

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

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

ここでは、ミディアム（md）ブレークポイント以上でBootstrapグリッドをカスタマイズする例を示します。.px-md-5で.colのパディングを増やし、次に親の.rowで.mx-md-n5を使用してそれを打ち消しています。

カスタム列パディング
カスタム列パディング
<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>