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.

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