Mellemrum
Bootstrap inkluderer en bred vifte af stenografi-responsive margin- og polstringsfunktionsklasser til at ændre et elements udseende.
Hvordan det virker
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
.
Notation
Afstandsværktøjer, der gælder for alle brudpunkter, fra xs
til xl
, 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
, og xl
.
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
l
- for klasser, der sættermargin-left
ellerpadding-left
r
- for klasser, der sættermargin-right
ellerpadding-right
x
- 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:
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
.
Negativ margin
I CSS kan margin
egenskaber bruge negative værdier ( padding
kan ikke). Fra og med 4.2 har vi tilføjet hjælpeprogrammer med negativ margin for hver heltalstørrelse, der ikke er nul, angivet ovenfor (f.eks. 1
, 2
, 3
, 4
, 5
). Disse værktøjer er ideelle til at tilpasse gitter søjler tagrender på tværs af brudpunkter.
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
:
Her er et eksempel på tilpasning af Bootstrap-gitteret ved medium ( md
) breakpoint og derover. Vi har øget .col
polstringen med .px-md-5
og så modvirket det med .mx-md-n5
på forælderen .row
.