Espacement
Bootstrap comprend une large gamme de classes utilitaires de marge et de rembourrage réactives pour modifier l'apparence d'un élément.
Comment ça fonctionne
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
.
Notation
Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xs
à xl
, 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
et xl
.
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
l
- pour les classes qui fixentmargin-left
oupadding-left
r
- pour les classes qui fixentmargin-right
oupadding-right
x
- 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;
}
.ml-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). Depuis la version 4.2, nous avons ajouté des utilitaires de marge négative pour chaque taille d'entier non nulle répertoriée ci-dessus (par exemple, 1
, 2
, 3
, 4
, 5
). Ces utilitaires sont idéaux pour personnaliser les gouttières de colonne de grille à travers les points d'arrêt.
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;
}
Voici un exemple de personnalisation de la grille Bootstrap au md
point d'arrêt moyen ( ) et au-dessus. Nous avons augmenté le .col
rembourrage avec .px-md-5
, puis avons contrecarré cela avec .mx-md-n5
sur le parent .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>