Mellanrum
Bootstrap inkluderar ett brett utbud av stenografiresponsiva marginal-, stoppnings- och gap-verktygsklasser för att modifiera ett elements utseende.
Marginal och stoppning
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
.
Använder du CSS Grid-layoutmodulen? Överväg att använda gap-verktyget .
Notation
Avståndsverktyg som gäller alla brytpunkter, från xs
till xxl
, 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
, xl
, och xxl
.
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
s
- (start) för klasser som sättermargin-left
ellerpadding-left
i LTR,margin-right
ellerpadding-right
i RTLe
- (slut) för klasser som sättermargin-right
ellerpadding-right
i LTR,margin-left
ellerpadding-left
i RTLx
- 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;
}
.ms-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). Dessa negativa marginaler är inaktiverade som standard , men kan aktiveras i Sass genom inställning $enable-negative-margins: true
.
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;
}
Glipa
När du använder display: grid
kan du använda gap
verktyg på den överordnade rutnätsbehållaren. Detta kan spara på att behöva lägga till marginalverktyg till enskilda rutnätsobjekt (barn i en display: grid
container). Gap-verktyg är lyhörda som standard och genereras via vårt verktygs-API, baserat på $spacers
Sass-kartan.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Supporten inkluderar responsiva alternativ för alla Bootstraps rutnätsbrytpunkter, samt sex storlekar från $spacers
kartan ( 0
– 5
). Det finns ingen .gap-auto
nyttoklass eftersom den i praktiken är densamma som .gap-0
.
Sass
Kartor
Avståndsverktyg deklareras via Sass-karta och genereras sedan med vårt verktygs-API.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
Utilities API
Avståndsverktyg deklareras i vårt verktygs-API i scss/_utilities.scss
. Lär dig hur du använder utilities API.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),