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 fixent margin
• p - pour les classes qui fixent padding

Où les côtés sont l'un des suivants :

• t - pour les classes qui fixent margin-top ou padding-top
• b - pour les classes qui fixent margin-bottom ou padding-bottom
• s - (start) pour les classes qui fixent margin-left ou padding-left en LTR, margin-right ou padding-right en RTL
• e - (end) pour les classes qui fixent margin-right or padding-right en LTR, margin-left ou padding-left en RTL
• x - pour les classes qui fixent à la fois *-left et *-right
• y - pour les classes qui fixentt à la fois *-top et *-bottom
• blank - pour les classes qui fixent a margin ou padding sur les 4 côtés de l'élément

Où la taille est l'une des suivantes :

• 0 - pour les classes qui éliminent le margin ou padding en le réglant sur 0
• 1 - (par défaut) pour les classes qui définissent le margin ou padding à $spacer * .25
• 2 - (par défaut) pour les classes qui définissent le margin ou padding à $spacer * .5
• 3 - (par défaut) pour les classes qui définissent le margin ou padding à $spacer
• 4 - (par défaut) pour les classes qui définissent le margin ou padding à $spacer * 1.5
• 5 - (par défaut) pour les classes qui définissent le margin ou padding à $spacer * 3
• auto - pour les classes qui mettent le margin à 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 widthensemble, 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;
}

Ecart

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.

Sass

Cartes

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