in English

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.

Sur cette page

Marge et rembourrage

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.

Vous utilisez le module de mise en page CSS Grid ? Envisagez d'utiliser l'utilitaire d'écart à la place.

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: 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, lg, xlet 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 fixent margin-topoupadding-top
b- pour les classes qui fixent margin-bottomoupadding-bottom
s- (démarrer) pour les classes qui définissent margin-leftsoit padding-leften LTR, margin-rightsoit padding-righten RTL
e- (fin) pour les classes qui fixent margin-rightsoit padding-righten LTR, margin-leftsoit padding-leften RTL
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;
}

.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-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). 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 navant 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 gaputilitaires 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: gridconteneur). Les utilitaires Gap sont réactifs par défaut et sont générés via notre API d'utilitaires, basée sur la $spacerscarte Sass.

Élément de grille 1

Élément de grille 2

Élément de grille 3

html

<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 $spacerscarte ( 0- 5). Il n'y a pas .gap-autode 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,
);

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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),