Spatiëring

Bootstrap bevat een breed scala aan steno-responsieve marge-, opvulling- en gap-hulpklassen om het uiterlijk van een element te wijzigen.

Op deze pagina

Marge en opvulling

Wijs responsieve-vriendelijke marginof paddingwaarden toe aan een element of een subset van zijn zijden met stenoklassen. Bevat ondersteuning voor afzonderlijke eigenschappen, alle eigenschappen en verticale en horizontale eigenschappen. Klassen zijn opgebouwd uit een standaard Sass-kaart, variërend van .25remtot 3rem.

Gebruik je de CSS-rasterlay-outmodule? Overweeg in plaats daarvan het gap-hulpprogramma te gebruiken.

Notatie

Spatiëringshulpprogramma's die van toepassing zijn op alle breekpunten, van xstot xxl, hebben geen breekpuntafkorting. Dit komt omdat die klassen vanaf min-width: 0en hoger worden toegepast en dus niet gebonden zijn aan een mediaquery. De overige breekpunten bevatten echter wel een breekpuntafkorting.

De klassen worden benoemd met behulp van het formaat {property}{sides}-{size}voor xsen {property}{sides}-{breakpoint}-{size}voor sm, md, lg, xlen xxl.

Waar eigendom is een van:

m- voor lessen die setmargin
p- voor lessen die setpadding

Waar zijden een van is:

t- voor klassen die margin-topofpadding-top
b- voor klassen die margin-bottomofpadding-bottom
s- (start) voor lessen die in margin-leftof padding-leftin LTR, margin-rightof padding-rightin RTL
e- (einde) voor lessen die in margin-rightof padding-rightin LTR, margin-leftof padding-leftin RTL
x- voor klassen die zowel *-leftand . instellen*-right
y- voor klassen die zowel *-topand . instellen*-bottom
blanco - voor klassen die een marginof paddingop alle 4 zijden van het element plaatsen

Waar de maat een is van:

0- voor klassen die de marginof elimineren paddingdoor deze in te stellen op0
1- (standaard) voor klassen die de marginof paddingop$spacer * .25
2- (standaard) voor klassen die de marginof paddingop$spacer * .5
3- (standaard) voor klassen die de marginof paddingop$spacer
4- (standaard) voor klassen die de marginof paddingop$spacer * 1.5
5- (standaard) voor klassen die de marginof paddingop$spacer * 3
auto- voor klassen die de marginop automatisch zetten

(U kunt meer formaten toevoegen door items toe te voegen aan de $spacersSass-kaartvariabele.)

Voorbeelden

Hier zijn enkele representatieve voorbeelden van deze klassen:

.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;
}

Horizontale centrering

Daarnaast bevat Bootstrap ook een .mx-autoklasse voor het horizontaal centreren van inhoud op blokniveau met een vaste breedte, dat wil zeggen inhoud met display: blocken een widthset, door de horizontale marges in te stellen op auto.

Gecentreerd element

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

Negatieve marge

In CSS kunnen margineigenschappen negatieve waarden gebruiken ( paddingkan niet). Deze negatieve marges zijn standaard uitgeschakeld , maar kunnen in Sass worden ingeschakeld door in te stellen $enable-negative-margins: true.

De syntaxis is bijna hetzelfde als de standaardhulpprogramma's voor positieve marge, maar met de toevoeging van nvóór de gevraagde grootte. Hier is een voorbeeldklasse die het tegenovergestelde is van .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Gat

Bij gebruik van display: grid, kunt u gebruik maken van gaphulpprogramma's op de bovenliggende rastercontainer. Dit kan besparen op het toevoegen van margehulpprogramma's aan individuele rasteritems (kinderen van een display: gridcontainer). Gap-hulpprogramma's reageren standaard en worden gegenereerd via onze hulpprogramma-API, op basis van de $spacersSass-kaart.

Rasteritem 1

Rasteritem 2

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

Ondersteuning omvat responsieve opties voor alle rasteronderbrekingspunten van Bootstrap, evenals zes formaten van de $spacerskaart ( 0– 5). Er is geen .gap-autohulpprogramma-klasse omdat het in feite hetzelfde is als .gap-0.

Sass

Kaarten

Spatiëringshulpprogramma's worden gedeclareerd via Sass-kaart en vervolgens gegenereerd met onze hulpprogramma's-API.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Hulpprogramma's-API

Spatiëringshulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss. Leer hoe u de hulpprogramma's-API gebruikt.

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