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 marginou 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: 0haut 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 xset {property}{sides}-{breakpoint}-{size}pour sm, md, lget 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 fixent margin-topoupadding-top
b- pour les classes qui fixent margin-bottomoupadding-bottom
l- pour les classes qui fixent margin-leftoupadding-left
r- pour les classes qui fixent margin-rightoupadding-right
x- pour les classes qui définissent à la fois *-leftet*-right
y- pour les classes qui définissent à la fois *-topet*-bottom
vide - pour les classes qui définissent un marginou paddingsur les 4 côtés de l'élément

Où la taille est l'une des suivantes :

0- pour les classes qui éliminent le marginou paddingen le réglant sur0
1- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer * .25
2- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer * .5
3- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer
4- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer * 1.5
5- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer * 3
auto- pour les classes qui mettent le marginà auto

(Vous pouvez ajouter plus de tailles en ajoutant des entrées à la $spacersvariable 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-autoclasse pour centrer horizontalement le contenu au niveau du bloc de largeur fixe, c'est-à-dire le contenu qui a display: blocket un widthensemble, en définissant les marges horizontales sur auto.

Élément centré

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Marge négative

En CSS, marginles propriétés peuvent utiliser des valeurs négatives ( paddingimpossible). 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 navant 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 mdpoint d'arrêt moyen ( ) et au-dessus. Nous avons augmenté le .colrembourrage avec .px-md-5, puis avons contrecarré cela avec .mx-md-n5sur le parent .row.

Rembourrage de colonne personnalisé

<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>