Source

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>

Negativ marginal

I CSS kan marginegenskaper använda negativa värden ( paddingkan inte). Från och med 4.2 har vi lagt till verktyg för negativ marginal för varje heltalsstorlek som inte är noll som anges ovan (t.ex. , 1, 2, 3, 4) 5. Dessa verktyg är idealiska för att anpassa rännor för gallerpelare över brytpunkter.

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

Här är ett exempel på anpassning av Bootstrap-rutnätet vid medelhög ( md) brytpunkt och högre. Vi har ökat .colstoppningen med .px-md-5och sedan motverkat det med .mx-md-n5på föräldern .row.

Anpassad kolumnstoppning

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>