Mellemrum
Bootstrap inkluderer en bred vifte af stenografi-responsive margin-, polstrings- og gap-hjælpeklasser for at ændre et elements udseende.
Margin og polstring
Tildel responsvenlige værdier til et element margin
eller padding
en delmængde af dets sider med stenografiklasser. Inkluderer understøttelse af individuelle egenskaber, alle egenskaber og lodrette og vandrette egenskaber. Klasser er bygget ud fra et standard Sass-kort, der spænder fra .25rem
til 3rem
.
Bruger du CSS Grid layout-modulet? Overvej at bruge gap-værktøjet .
Notation
Afstandsværktøjer, der gælder for alle brudpunkter, fra xs
til xxl
, har ingen brudpunktforkortelse i sig. Dette skyldes, at disse klasser anvendes fra min-width: 0
og op, og derfor ikke er bundet af en medieforespørgsel. De resterende brudpunkter inkluderer dog en brudpunktforkortelse.
Klasserne navngives ved hjælp af formatet {property}{sides}-{size}
for xs
og {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, xl
, og xxl
.
Hvor ejendom er en af:
m
- for klasser, der sættermargin
p
- for klasser, der sætterpadding
Hvor sider er en af:
t
- for klasser, der sættermargin-top
ellerpadding-top
b
- for klasser, der sættermargin-bottom
ellerpadding-bottom
s
- (start) for klasser, der indstillermargin-left
ellerpadding-left
i LTR,margin-right
ellerpadding-right
i RTLe
- (slut) for klasser, der sættermargin-right
ellerpadding-right
i LTR,margin-left
ellerpadding-left
i RTLx
- for klasser, der sætter både*-left
og*-right
y
- for klasser, der sætter både*-top
og*-bottom
- blank - for klasser, der sætter en
margin
ellerpadding
på alle 4 sider af elementet
Hvor størrelsen er en af:
0
- for klasser, der eliminerermargin
ellerpadding
ved at indstille det til0
1
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer * .25
2
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer * .5
3
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer
4
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer * 1.5
5
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer * 3
auto
- for klasser, der indstillermargin
til auto
(Du kan tilføje flere størrelser ved at tilføje poster til $spacers
Sass-kortvariablen.)
Eksempler
Her er nogle repræsentative eksempler på disse 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;
}
Vandret centrering
Derudover inkluderer Bootstrap også en .mx-auto
klasse til vandret centrering af blokniveauindhold med fast bredde - det vil sige indhold, der har display: block
og et width
sæt - ved at indstille de vandrette margener til auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativ margin
I CSS kan margin
egenskaber bruge negative værdier ( padding
kan ikke). Disse negative margener er deaktiveret som standard , men kan aktiveres i Sass ved at indstille $enable-negative-margins: true
.
Syntaksen er næsten den samme som standardværktøjerne med positiv margin, men med tilføjelse af n
før den ønskede størrelse. Her er et eksempel på en klasse, der er det modsatte af .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Kløft
Når du bruger display: grid
, kan du gøre brug af gap
hjælpeprogrammer på den overordnede gitterbeholder. Dette kan spare på at skulle tilføje marginværktøjer til individuelle grid-elementer (børn af en display: grid
container). Gap-værktøjer er som standard responsive og genereres via vores hjælpeprogrammer API, baseret på $spacers
Sass-kortet.
<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>
Support inkluderer responsive muligheder for alle Bootstraps grid breakpoints samt seks størrelser fra $spacers
kortet ( 0
– 5
). Der er ingen .gap-auto
brugsklasse, da den faktisk er den samme som .gap-0
.
Sass
Kort
Afstandsværktøjer erklæres via Sass-kort og genereres derefter med vores hjælpeprogrammer 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);
Hjælpeprogrammer API
Afstandsværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss
. Lær, hvordan du bruger 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
),