間隔

Bootstrap には、要素の外観を変更するための、さまざまな簡潔なレスポンシブマージンおよびパディングユーティリティクラスが含まれています。

使い方

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

表記

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

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

プロパティは次のいずれかです。

m- セットするクラスの場合margin
p- セットするクラスの場合padding

sideは次のいずれかです。

tmargin-top-またはを設定するクラスの場合padding-top
bmargin-bottom-またはを設定するクラスの場合padding-bottom
lmargin-left-またはを設定するクラスの場合padding-left
rmargin-right-またはを設定するクラスの場合padding-right
x*-left- との両方を設定するクラスの場合*-right
y*-top- との両方を設定するクラスの場合*-bottom
空白 -要素の 4 辺すべてにmarginorを設定するクラスの場合padding

sizeは次のいずれかです。

0margin- orpaddingを設定してorを削除するクラスの場合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
automargin-を 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 には、水平方向の余白をに設定することにより.mx-auto、固定幅のブロックレベルコンテンツ (つまり、display: blockとセットを持つコンテンツ) を水平方向に中央揃えするためのクラスも含まれています。widthauto

中央揃えの要素

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

マイナスマージン

CSS では、marginプロパティは負の値を使用できます (padding使用できません)。4.2 の時点で、上記のすべてのゼロ以外の整数サイズ (例: 、1、2、 )に対して負のマージンユーティリティを追加しました。これらのユーティリティは、ブレークポイント全体でグリッド列ガターをカスタマイズするのに最適です。345

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

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

md中 ( ) ブレークポイント以上で Bootstrap グリッドをカスタマイズする例を次に示します。.colでパディングを増やしてから、親.px-md-5でそれを打ち消しました。.mx-md-n5.row

カスタム列パディング

<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>