Wenn du in der custom.scss folgende Zeile hinzufügst, kannst du bei den Inhaltselementen verschiedene Klassen nutzen um die Abstände (margin/padding) anzupassen.
@import 'spacing-helpers';
Klassen | Erklärung |
---|---|
für alle Bildschirmgrößen | |
m-10 , m-20 … m-100 |
Außenabstand (10px, 20px … 100px) |
mt-10 , mt-20 … mt-100 |
Außenabstand nach oben (10px, 20px … 100px) |
mb-10 , mb-20 … mb-100 |
Außenabstand nach unten (10px, 20px … 100px) |
ml-10 , ml-20 … ml-100 |
Außenabstand nach links (10px, 20px … 100px) |
mr-10 , mr-20 … mr-100 |
Außenabstand nach rechts (10px, 20px … 100px) |
p-10 , p-20 … p-100 |
Innenabstand (10px, 20px … 100px) |
pt-10 , pt-20 … pt-100 |
Innenabstand nach oben (10px, 20px … 100px) |
pb-10 , pb-20 … pb-100 |
Innenabstand nach unten (10px, 20px … 100px) |
pl-10 , pl-20 … pl-100 |
Innenabstand nach links (10px, 20px … 100px) |
pr-10 , pr-20 … pr-100 |
Innenabstand nach rechts (10px, 20px … 100px) |
nur für Bildschirmgröße > 600px | |
m-m-10 , m-m-20 … m-m-100 |
Innenabstand (10px, 20px … 100px) |
mt-m-10 , mt-m-20 … mt-m-100 |
Außenabstand nach oben (10px, 20px … 100px) |
mb-m-10 , mb-m-20 … mb-m-100 |
Außenabstand nach unten (10px, 20px … 100px) |
ml-m-10 , ml-m-20 … ml-m-100 |
Außenabstand nach links (10px, 20px … 100px) |
mr-m-10 , mr-m-20 … mr-m-100 |
Außenabstand nach rechts (10px, 20px … 100px) |
p-m-10 , p-m-20 … p-m-100 |
Innenabstand (10px, 20px … 100px) |
pt-m-10 , pt-m-20 … pt-m-100 |
Innenabstand nach oben (10px, 20px … 100px) |
pb-m-10 , pb-m-20 … pb-m-100 |
Innenabstand nach unten (10px, 20px … 100px) |
pl-m-10 , pl-m-20 … pl-m-100 |
Innenabstand nach links (10px, 20px … 100px) |
pr-m-10 , pr-m-20 … pr-m-100 |
Innenabstand nach rechts (10px, 20px … 100px) |
nur für Bildschirmgröße > 992px | |
m-l-10 , m-l-20 … m-l-100 |
Innenabstand (10px, 20px … 100px) |
mt-l-10 , mt-l-20 … mt-l-100 |
Außenabstand nach oben (10px, 20px … 100px) |
mb-l-10 , mb-l-20 … mb-l-100 |
Außenabstand nach unten (10px, 20px … 100px) |
ml-l-10 , ml-l-20 … ml-l-100 |
Außenabstand nach links (10px, 20px … 100px) |
mr-l-10 , mr-l-20 … mr-l-100 |
Außenabstand nach rechts (10px, 20px … 100px) |
p-l-10 , p-l-20 … p-l-100 |
Innenabstand (10px, 20px … 100px) |
pt-l-10 , pt-l-20 … pt-l-100 |
Innenabstand nach oben (10px, 20px … 100px) |
pb-l-10 , pb-l-20 … pb-l-100 |
Innenabstand nach unten (10px, 20px … 100px) |
pl-l-10 , pl-l-20 … pl-l-100 |
Innenabstand nach links (10px, 20px … 100px) |
pr-l-10 , pr-l-20 … pr-l-100 |
Innenabstand nach rechts (10px, 20px … 100px) |
nur für Bildschirmgröße > 1200px | |
m-xl-10 , m-xl-20 … m-xl-100 |
Innenabstand (10px, 20px … 100px) |
mt-xl-10 , mt-xl-20 … mt-xl-100 |
Außenabstand nach oben (10px, 20px … 100px) |
mb-xl-10 , mb-xl-20 … mb-xl-100 |
Außenabstand nach unten (10px, 20px … 100px) |
ml-xl-10 , ml-xl-20 … ml-xl-100 |
Außenabstand nach links (10px, 20px … 100px) |
mr-xl-10 , mr-xl-20 … mr-xl-100 |
Außenabstand nach rechts (10px, 20px … 100px) |
p-xl-10 , p-xl-20 … p-xl-100 |
Innenabstand (10px, 20px … 100px) |
pt-xl-10 , pt-xl-20 … pt-xl-100 |
Innenabstand nach oben (10px, 20px … 100px) |
pb-xl-10 , pb-xl-20 … pb-xl-100 |
Innenabstand nach unten (10px, 20px … 100px) |
pl-xl-10 , pl-xl-20 … pl-xl-100 |
Innenabstand nach links (10px, 20px … 100px) |
pr-xl-10 , pr-xl-20 … pr-xl-100 |
Innenabstand nach rechts (10px, 20px … 100px) |