Source

間隔

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

使い方

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

表記

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

クラスは、{property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for smmdlg、およびの形式を使用して名前が付けられ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 の時点で、上記のすべてのゼロ以外の整数サイズ (例: 、12、 )に対して負のマージン ユーティリティを追加しました。これらのユーティリティは、ブレークポイント全体でグリッド列ガターをカスタマイズするのに最適です。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 py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>