Mellanrum

Bootstrap inkluderar ett brett utbud av stenografiresponsiva marginal-, stoppnings- och gap-verktygsklasser för att modifiera ett elements utseende.

På den här sidan

Marginal och stoppning

Tilldela responsvänliga margineller paddingvärden till ett element eller en delmängd av dess sidor med stenografiklasser. Inkluderar stöd för enskilda fastigheter, alla fastigheter och vertikala och horisontella egenskaper. Klasser är byggda från en standard Sass-karta som sträcker sig från .25remtill 3rem.

Använder du CSS Grid-layoutmodulen? Överväg att använda gap-verktyget .

Notation

Avståndsverktyg som gäller alla brytpunkter, från xstill xxl, har ingen brytpunktsförkortning i sig. Detta beror på att dessa klasser tillämpas uppifrån min-width: 0och upp och därför inte är bundna av en mediefråga. De återstående brytpunkterna inkluderar dock en brytpunktsförkortning.

Klasserna namnges med formatet {property}{sides}-{size}för xsoch {property}{sides}-{breakpoint}-{size}för sm, md, lg, xl, och xxl.

Där egendom är en av:

m- för klasser som sättermargin
p- för klasser som sätterpadding

Där sidor är en av:

t- för klasser som sätter margin-topellerpadding-top
b- för klasser som sätter margin-bottomellerpadding-bottom
s- (start) för klasser som sätter margin-lefteller padding-lefti LTR, margin-righteller padding-righti RTL
e- (slut) för klasser som sätter margin-righteller padding-righti LTR, margin-lefteller padding-lefti RTL
x- för klasser som ställer både *-leftoch*-right
y- för klasser som ställer både *-topoch*-bottom
blank - för klasser som sätter en margineller paddingpå alla fyra sidor av elementet

Där storleken är en av:

0- för klasser som eliminerar margineller paddinggenom att ställa in den till0
1- (som standard) för klasser som ställer in margineller paddingtill$spacer * .25
2- (som standard) för klasser som ställer in margineller paddingtill$spacer * .5
3- (som standard) för klasser som ställer in margineller paddingtill$spacer
4- (som standard) för klasser som ställer in margineller paddingtill$spacer * 1.5
5- (som standard) för klasser som ställer in margineller paddingtill$spacer * 3
auto- för klasser som ställer in margintill auto

(Du kan lägga till fler storlekar genom att lägga till poster i $spacersSass kartvariabel.)

Exempel

Här är några representativa exempel på dessa klasser:

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

Horisontell centrering

Dessutom inkluderar Bootstrap också en .mx-autoklass för att horisontellt centrera innehåll på blocknivå med fast bredd – det vill säga innehåll som har display: blockoch en widthuppsättning – genom att ställa in de horisontella marginalerna till auto.

Centrerat element

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

Negativ marginal

I CSS kan marginegenskaper använda negativa värden ( paddingkan inte). Dessa negativa marginaler är inaktiverade som standard , men kan aktiveras i Sass genom inställning $enable-negative-margins: true.

Syntaxen är nästan densamma som standardverktygen med positiv marginal, men med tillägg av nföre den begärda storleken. Här är en exempelklass som är motsatsen till .mt-1:

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

Glipa

När du använder display: gridkan du använda gapverktyg på den överordnade rutnätsbehållaren. Detta kan spara på att behöva lägga till marginalverktyg till enskilda rutnätsobjekt (barn i en display: gridcontainer). Gap-verktyg är lyhörda som standard och genereras via vårt verktygs-API, baserat på $spacersSass-kartan.

Rutnätspost 1

Rutnätspost 2

Rutnätspost 3

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

Supporten inkluderar responsiva alternativ för alla Bootstraps rutnätsbrytpunkter, samt sex storlekar från $spacerskartan ( 0– 5). Det finns ingen .gap-autonyttoklass eftersom den i praktiken är densamma som .gap-0.

Sass

Kartor

Avståndsverktyg deklareras via Sass-karta och genereras sedan med vårt verktygs-API.

$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);

Utilities API

Avståndsverktyg deklareras i vårt verktygs-API i scss/_utilities.scss. Lär dig hur du använder utilities API.

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