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 margin
eller padding
vä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 .25rem
till 3rem
.
Notation
Avståndsverktyg som gäller alla brytpunkter, från xs
till xl
, har ingen brytpunktsförkortning i sig. Detta beror på att dessa klasser tillämpas uppifrån min-width: 0
och 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 xs
och {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ättermargin-top
ellerpadding-top
b
- för klasser som sättermargin-bottom
ellerpadding-bottom
l
- för klasser som sättermargin-left
ellerpadding-left
r
- för klasser som sättermargin-right
ellerpadding-right
x
- för klasser som ställer både*-left
och*-right
y
- för klasser som ställer både*-top
och*-bottom
- blank - för klasser som sätter en
margin
ellerpadding
på alla fyra sidor av elementet
Där storleken är en av:
0
- för klasser som eliminerarmargin
ellerpadding
genom att ställa in den till0
1
- (som standard) för klasser som ställer inmargin
ellerpadding
till$spacer * .25
2
- (som standard) för klasser som ställer inmargin
ellerpadding
till$spacer * .5
3
- (som standard) för klasser som ställer inmargin
ellerpadding
till$spacer
4
- (som standard) för klasser som ställer inmargin
ellerpadding
till$spacer * 1.5
5
- (som standard) för klasser som ställer inmargin
ellerpadding
till$spacer * 3
auto
- för klasser som ställer inmargin
till auto
(Du kan lägga till fler storlekar genom att lägga till poster i $spacers
Sass 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-auto
klass för att horisontellt centrera innehåll på blocknivå med fast bredd – det vill säga innehåll som har display: block
och en width
uppsättning – genom att ställa in de horisontella marginalerna till auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativ marginal
I CSS kan margin
egenskaper använda negativa värden ( padding
kan 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 n
fö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 .col
stoppningen med .px-md-5
och sedan motverkat det med .mx-md-n5
på föräldern .row
.
<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>