Source

間隔

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>