Espacement
Bootstrap comprend une large gamme de classes utilitaires de marge, de remplissage et d'espacement réactives pour modifier l'apparence d'un élément.
Marge et rembourrage
Attribuez des valeurs margin
ou responsive-friendly padding
à un élément ou à un sous-ensemble de ses côtés avec des classes abrégées. Inclut la prise en charge des propriétés individuelles, de toutes les propriétés et des propriétés verticales et horizontales. Les classes sont construites à partir d'une carte Sass par défaut allant de .25rem
à 3rem
.
Vous utilisez le module de mise en page CSS Grid ? Envisagez d'utiliser l'utilitaire gap .
Notation
Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xs
à xxl
, n'ont pas d'abréviation de point d'arrêt. En effet, ces classes sont appliquées de min-width: 0
haut en bas et ne sont donc pas liées par une requête multimédia. Cependant, les points d'arrêt restants incluent une abréviation de point d'arrêt.
Les classes sont nommées en utilisant le format {property}{sides}-{size}
pour xs
et {property}{sides}-{breakpoint}-{size}
pour sm
, md
, lg
, xl
et xxl
.
Lorsque la propriété est l'une des suivantes :
m
- pour les classes qui fixentmargin
p
- pour les classes qui fixentpadding
Où les côtés sont l'un des suivants :
t
- pour les classes qui fixentmargin-top
oupadding-top
b
- pour les classes qui fixentmargin-bottom
oupadding-bottom
s
- (démarrer) pour les classes qui définissentmargin-left
soitpadding-left
en LTR,margin-right
soitpadding-right
en RTLe
- (fin) pour les classes qui fixentmargin-right
soitpadding-right
en LTR,margin-left
soitpadding-left
en RTLx
- pour les classes qui définissent à la fois*-left
et*-right
y
- pour les classes qui définissent à la fois*-top
et*-bottom
- vide - pour les classes qui définissent un
margin
oupadding
sur les 4 côtés de l'élément
Où la taille est l'une des suivantes :
0
- pour les classes qui éliminent lemargin
oupadding
en le réglant sur0
1
- (par défaut) pour les classes qui définissent lemargin
oupadding
sur$spacer * .25
2
- (par défaut) pour les classes qui définissent lemargin
oupadding
sur$spacer * .5
3
- (par défaut) pour les classes qui définissent lemargin
oupadding
sur$spacer
4
- (par défaut) pour les classes qui définissent lemargin
oupadding
sur$spacer * 1.5
5
- (par défaut) pour les classes qui définissent lemargin
oupadding
sur$spacer * 3
auto
- pour les classes qui mettent lemargin
à auto
(Vous pouvez ajouter plus de tailles en ajoutant des entrées à la $spacers
variable de carte Sass.)
Exemples
Voici quelques exemples représentatifs de ces classes :
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Centrage horizontal
De plus, Bootstrap inclut également une .mx-auto
classe pour centrer horizontalement le contenu au niveau du bloc de largeur fixe, c'est-à-dire le contenu qui a display: block
et un width
ensemble, en définissant les marges horizontales sur auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marge négative
En CSS, margin
les propriétés peuvent utiliser des valeurs négatives ( padding
impossible). Ces marges négatives sont désactivées par défaut , mais peuvent être activées dans Sass en définissant $enable-negative-margins: true
.
La syntaxe est presque la même que celle des utilitaires de marge positive par défaut, mais avec l'ajout de n
avant la taille demandée. Voici un exemple de classe qui est à l'opposé de .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Écart
Lorsque vous utilisez display: grid
, vous pouvez utiliser des gap
utilitaires sur le conteneur de grille parent. Cela peut éviter d'avoir à ajouter des utilitaires de marge à des éléments de grille individuels (enfants d'un display: grid
conteneur). Les utilitaires Gap sont réactifs par défaut et sont générés via notre API d'utilitaires, basée sur la $spacers
carte Sass.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
La prise en charge inclut des options réactives pour tous les points d'arrêt de la grille de Bootstrap, ainsi que six tailles de la $spacers
carte ( 0
- 5
). Il n'y a pas .gap-auto
de classe utilitaire car c'est effectivement la même chose que .gap-0
.
Toupet
Plans
Les utilitaires d'espacement sont déclarés via la carte Sass, puis générés avec notre API d'utilitaires.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
API utilitaires
Les utilitaires d'espacement sont déclarés dans notre API d'utilitaires au format scss/_utilities.scss
. Apprenez à utiliser l'API des utilitaires.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
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
),