Mellanrum

Bootstrap innehåller ett brett utbud av responsiva marginaler och utfyllnadsklasser för att modifiera ett elements utseende.

Hur det fungerar

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.

Notation

Avståndsverktyg som gäller alla brytpunkter, från xstill xl, 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, och xl.

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
l- för klasser som sätter margin-leftellerpadding-left
r- för klasser som sätter margin-rightellerpadding-right
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 marginpå 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;
}

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