Avstand
Bootstrap inkluderer et bredt spekter av responsive margin-, polstrings- og gap-verktøyklasser for å modifisere et elements utseende.
Margin og polstring
Tilordne responsvennlige margin
eller padding
verdier til et element eller en undergruppe av dets sider med stenografiklasser. Inkluderer støtte for individuelle egenskaper, alle egenskaper og vertikale og horisontale egenskaper. Klassene bygges fra et standard Sass-kart som strekker seg fra .25rem
til 3rem
.
Bruker du CSS Grid layout-modulen? Vurder å bruke gap-verktøyet .
Notasjon
Avstandsverktøy som gjelder for alle bruddpunkter, fra xs
til xxl
, har ingen bruddpunktforkortelse i seg. Dette er fordi disse klassene brukes fra min-width: 0
og oppover, og dermed ikke er bundet av en mediespørring. De resterende bruddpunktene inkluderer imidlertid en bruddpunktforkortelse.
Klassene er navngitt med formatet {property}{sides}-{size}
for xs
og {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, xl
, og xxl
.
Hvor eiendom er en av:
m
- for klasser som settermargin
p
- for klasser som setterpadding
Hvor sider er en av:
t
- for klasser som settermargin-top
ellerpadding-top
b
- for klasser som settermargin-bottom
ellerpadding-bottom
s
- (start) for klasser som settermargin-left
ellerpadding-left
i LTR,margin-right
ellerpadding-right
i RTLe
- (slutt) for klasser som settermargin-right
ellerpadding-right
i LTR,margin-left
ellerpadding-left
i RTLx
- for klasser som setter både*-left
og*-right
y
- for klasser som setter både*-top
og*-bottom
- blank - for klasser som setter a
margin
ellerpadding
på alle 4 sider av elementet
Hvor størrelsen er en av:
0
- for klasser som eliminerermargin
ellerpadding
ved å sette den til0
1
- (som standard) for klasser som settermargin
ellerpadding
til$spacer * .25
2
- (som standard) for klasser som settermargin
ellerpadding
til$spacer * .5
3
- (som standard) for klasser som settermargin
ellerpadding
til$spacer
4
- (som standard) for klasser som settermargin
ellerpadding
til$spacer * 1.5
5
- (som standard) for klasser som settermargin
ellerpadding
til$spacer * 3
auto
- for klasser som settermargin
til auto
(Du kan legge til flere størrelser ved å legge til oppføringer i $spacers
Sass-kartvariabelen.)
Eksempler
Her er noen representative eksempler på disse klassene:
.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;
}
Horisontal sentrering
I tillegg inkluderer Bootstrap også en .mx-auto
klasse for horisontalt sentrering av blokknivåinnhold med fast bredde – det vil si innhold som har display: block
og et width
sett – ved å sette de horisontale margene til auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativ margin
I CSS kan margin
egenskaper bruke negative verdier ( padding
kan ikke). Disse negative margene er deaktivert som standard , men kan aktiveres i Sass ved innstilling $enable-negative-margins: true
.
Syntaksen er nesten den samme som standard, positiv marginverktøy, men med tillegg av n
før den forespurte størrelsen. Her er en eksempelklasse som er det motsatte av .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Mellomrom
Når du bruker display: grid
, kan du bruke gap
verktøy på den overordnede rutenettbeholderen. Dette kan spare på å måtte legge til marginverktøy til individuelle rutenettelementer (barn av en display: grid
container). Gap-verktøy er responsive som standard, og genereres via vår utilities API, basert på $spacers
Sass-kartet.
<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>
Støtte inkluderer responsive alternativer for alle Bootstraps rutenettbrytepunkter, samt seks størrelser fra $spacers
kartet ( 0
– 5
). Det er ingen .gap-auto
verktøyklasse, da den i praksis er den samme som .gap-0
.
Sass
Kart
Avstandsverktøy deklareres via Sass-kart og genereres deretter med vår utilities 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
Avstandsverktøy er deklarert i vår utilities API i scss/_utilities.scss
. Lær hvordan du bruker 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
),