マージンとパディング
レスポンシブな
margin
や
padding
の値を要素などに適用します。単一のプロパティ、すべてのプロパティ、水平方向と垂直方向のプロパティをサポートしています。クラスは、
.25rem
から
3rem
までの範囲のデフォルトのSassマップから構築しています。
CSS Gridレイアウトモジュールを使用していますか?
代わりに
the gap utility
の使用を検討してください。
xs
から
xxl
までのすべてのブレイクポイントに適用される余白ユーティリティには、ブレイクポイントの略語が含まれていません。
これらのクラスは
min-width: 0
以降に適用されるため、メディアクエリに縛られないからです。しかし、残りのブレイクポイントにはブレイクポイントの略語が含まれています。
クラスは、
xs
の場合は
{property}{sides}-{size}
という形式で
sm
、
md
、
lg
、
xl
、
xxl
の場合は
{property}{sides}-{breakpoint}-{size}
というクラスになります。
property
は以下のいずれかです。
m
-
margin
を設定するクラスの場合
p
-
padding
を設定するクラス用
sides
は以下のいずれかです。
t
-
margin-top
または
padding-top
を設定します。
b
-
margin-bottom
または
padding-bottom
を設定します。
s
- (start)LTRで
margin-left
または
padding-left
を、RTLで
margin-right
または
padding-right
を設定します。
e
- (end)LTRで
margin-right
または
padding-right
、RTLで
margin-left
または
padding-left
を設定します。
x
-
*-left
と
*-right
の両方を設定します。
y
-
*-top
と
*-bottom
の両方を設定します。
blank - 要素の四辺に
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;
.ms-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には、固定幅のブロックレベルのコンテンツ、つまり
display: block
と
width
が設定されているコンテンツで、水平方向のマージンを
auto
に設定して、水平方向の中央揃えするための
.mx-auto
クラスもあります。
Centered element
<div class="mx-auto p-2" style="width: 200px;">
Centered element
</div>
CSSでは、
margin
プロパティは負の値を利用することができます（
padding
はできません）。このネガティブマージンはデフォルトでは
無効
ですが、Sassでは
$enable-negative-margins: true
を設定することで有効にすることができます。
構文はデフォルトの正のマージンユーティリティとほぼ同じですが、要求するサイズの前に
n
が追加されています。以下は、
.mt-1
の逆を行くクラスの例です。:
.mt-n1 {
margin-top: -0.25rem !important;
display: gridやdisplay: flexを使用する場合、親要素のgapユーティリティを使用することができます。これにより、グリッドやフレックスコンテナの個々の子要素にマージンユーティリティを追加する手間を省くことができます。ギャップユーティリティはデフォルトでレスポンシブであり、Sassマップの$spacersに基づいて、ユーティリティAPIから生成されます。
Grid item 1
Grid item 2
Grid item 3
Grid item 4
<div class="grid gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
Bootstrapのすべてのグリッドのブレイクポイントのレスポンシブオプションと、
$spacers
マップの6つのサイズ(
0
～
5
)をサポートしています。
.gap-0
と実質的に同じなので、
.gap-auto
ユーティリティクラスはありません。
row-gap
は指定されたコンテナ内の子アイテム間の垂直方向のスペースを設定します。
Grid item 1
Grid item 2
Grid item 3
Grid item 4
<div class="grid gap-0 row-gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
column-gap
は指定されたコンテナ内の子アイテム間の水平方向のスペースを設定します。
Grid item 1
Grid item 2
Grid item 3
Grid item 4
<div class="grid gap-0 column-gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
余白ユーティリティはSassマップで宣言され、ユーティリティAPIで生成されます。
scss/_variables.scss
property
:
margin-right
margin-left
,
class
:
mx
,
values
:
map-merge
(
$
spacers
,
(
auto
:
auto
))
"margin-y"
:
(
responsive
:
true
,
property
:
margin-top
margin-bottom
,
class
:
my
,
values
:
map-merge
(
$
spacers
,
(
auto
:
auto
))
"margin-top"
:
(
responsive
:
true
,
property
:
margin-top
,
class
:
mt
,
values
:
map-merge
(
$
spacers
,
(
auto
:
auto
))
"margin-end"
:
(
responsive
:
true
,
property
:
margin-right
,
class
:
me
,
values
:
map-merge
(
$
spacers
,
(
auto
:
auto
))
"margin-bottom"
:
(
responsive
:
true
,
property
:
margin-bottom
,
class
:
mb
,
values
:
map-merge
(
$
spacers
,
(
auto
:
auto
))
"margin-start"
:
(
responsive
:
true
,
property
:
margin-left
,
class
:
ms
,
values
:
map-merge
(
$
spacers
,
(
auto
:
auto
))
//
Negative
margin
utilities
"negative-margin"
:
(
responsive
:
true
,
property
:
margin
,
class
:
m
,
values
:
$
negative-spacers
"negative-margin-x"
:
(
responsive
:
true
,
property
:
margin-right
margin-left
,
class
:
mx
,
values
:
$
negative-spacers
"negative-margin-y"
:
(
responsive
:
true
,
property
:
margin-top
margin-bottom
,
class
:
my
,
values
:
$
negative-spacers
"negative-margin-top"
:
(
responsive
:
true
,
property
:
margin-top
,
class
:
mt
,
values
:
$
negative-spacers
"negative-margin-end"
:
(
responsive
:
true
,
property
:
margin-right
,
class
:
me
,
values
:
$
negative-spacers
"negative-margin-bottom"
:
(
responsive
:
true
,
property
:
margin-bottom
,
class
:
mb
,
values
:
$
negative-spacers
"negative-margin-start"
:
(
responsive
:
true
,
property
:
margin-left
,
class
:
ms
,
values
:
$
negative-spacers
//
Padding
utilities
"padding"
:
(
responsive
:
true
,
property
:
padding
,
class
:
p
,
values
:
$
spacers
"padding-x"
:
(
responsive
:
true
,
property
:
padding-right
padding-left
,
class
:
px
,
values
:
$
spacers
"padding-y"
:
(
responsive
:
true
,
property
:
padding-top
padding-bottom
,
class
:
py
,
values
:
$
spacers
"padding-top"
:
(
responsive
:
true
,
property
:
padding-top
,
class
:
pt
,
values
:
$
spacers
"padding-end"
:
(
responsive
:
true
,
property
:
padding-right
,
class
:
pe
,
values
:
$
spacers
"padding-bottom"
:
(
responsive
:
true
,
property
:
padding-bottom
,
class
:
pb
,
values
:
$
spacers
"padding-start"
:
(
responsive
:
true
,
property
:
padding-left
,
class
:
ps
,
values
:
$
spacers
//
Gap
utility
"gap"
:
(
responsive
:
true
,
property
:
gap
,
class
:
gap
,
values
:
$
spacers
"row-gap"
:
(
responsive
:
true
,
property
:
row-gap
,
class
:
row-gap
,
values
:
$
spacers
"column-gap"
:
(
responsive
:
true
,
property
:
column-gap
,
class
:
column-gap
,
values
:
$
spacers
