Mellemrum

Bootstrap inkluderer en bred vifte af stenografi-responsive margin- og polstringsfunktionsklasser til at ændre et elements udseende.

Hvordan det virker

Tildel responsvenlige værdier til et element margineller paddingen delmængde af dets sider med stenografiklasser. Inkluderer understøttelse af individuelle egenskaber, alle egenskaber og lodrette og vandrette egenskaber. Klasser er bygget ud fra et standard Sass-kort, der spænder fra .25remtil 3rem.

Notation

Afstandsværktøjer, der gælder for alle brudpunkter, fra xstil xl, har ingen brudpunktforkortelse i sig. Dette skyldes, at disse klasser anvendes fra min-width: 0og op, og derfor ikke er bundet af en medieforespørgsel. De resterende brudpunkter inkluderer dog en brudpunktforkortelse.

Klasserne navngives ved hjælp af formatet {property}{sides}-{size}for xsog {property}{sides}-{breakpoint}-{size}for sm, md, lg, og xl.

Hvor ejendom er en af:

m- for klasser, der sættermargin
p- for klasser, der sætterpadding

Hvor sider er en af:

t- for klasser, der sætter margin-topellerpadding-top
b- for klasser, der sætter margin-bottomellerpadding-bottom
l- for klasser, der sætter margin-leftellerpadding-left
r- for klasser, der sætter margin-rightellerpadding-right
x- for klasser, der sætter både *-leftog*-right
y- for klasser, der sætter både *-topog*-bottom
blank - for klasser, der sætter en margineller paddingpå alle 4 sider af elementet

Hvor størrelsen er en af:

0- for klasser, der eliminerer margineller paddingved at indstille det til0
1- (som standard) for klasser, der indstiller margineller paddingtil$spacer * .25
2- (som standard) for klasser, der indstiller margineller paddingtil$spacer * .5
3- (som standard) for klasser, der indstiller margineller paddingtil$spacer
4- (som standard) for klasser, der indstiller margineller paddingtil$spacer * 1.5
5- (som standard) for klasser, der indstiller margineller paddingtil$spacer * 3
auto- for klasser, der indstiller margintil auto

(Du kan tilføje flere størrelser ved at tilføje poster til $spacersSass-kortvariablen.)

Eksempler

Her er nogle repræsentative eksempler på disse klasser:

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

Vandret centrering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element

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

Negative margin

In CSS, margin properties can utilize negative values (padding cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1, 2, 3, 4, 5). These utilities are ideal for customizing grid column gutters across breakpoints.

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here’s an example class that’s the opposite of .mt-1:

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

Her er et eksempel på tilpasning af Bootstrap-gitteret ved medium ( md) breakpoint og derover. Vi har øget .colpolstringen med .px-md-5og så modvirket det med .mx-md-n5på forælderen .row.

Brugerdefineret søjlepolstring

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