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

Derudover inkluderer Bootstrap også en .mx-autoklasse til vandret centrering af blokniveauindhold med fast bredde - det vil sige indhold, der har display: blockog et widthsæt - ved at indstille de vandrette margener til auto.

Centreret element

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

Negativ margin

I CSS kan marginegenskaber bruge negative værdier ( paddingkan ikke). Fra og med 4.2 har vi tilføjet hjælpeprogrammer med negativ margin for hver heltalstørrelse, der ikke er nul, angivet ovenfor (f.eks. 1, 2, 3, 4, 5). Disse værktøjer er ideelle til at tilpasse gitter søjler tagrender på tværs af brudpunkter.

Syntaksen er næsten den samme som standardværktøjerne med positiv margin, men med tilføjelse af nfør den ønskede størrelse. Her er et eksempel på en klasse, der er det modsatte af .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>