Bootstrap 5 Columns Part 3
Wir kennen bereits: align-items-start, align-items-center, align-item-end. Mehr dazu erfahren Sie in diesem Post. Sie positionieren über die row Klasse.
Die Positionierung über die col Klasse haben wir im erwähnten Post, mit Hilfe von align-self-start, align-self-center und align-self-end umgesetzt.
Diese Positionierungen hatten sich alle auf die vertikale Richtung bezogen. In der horizontalen Richtung konnten Sie im erwähnten Post justify-content-start, justify-content-center und justify-content-end kennen lernen. Nun geht es weiter mit
justify-content-around
Mit dieser Bootstrap 5 Klasse wird der freie Raum horizontal, gleichmäßig unter dem Inhalt der row verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist der Gleiche. Der leere Raum am Anfang und am Ende der Reihe, nimmt dabei die Hälfte des Abstandes zwischen benachbarten Elementen in Anspruch. Beispiel:
justify-content-between
Diese Variante verteilt den leeren Raum ausschließlich zwischen den Elementen. Das heisst vor dem ersten und nach dem letzten Element befindet sich kein leerer Raum:
justify-content-evenly
Diese Klasse ist ein enger Verwandter von justify-content-around. Der große Unterschied ist, das der frei Raum gleichmäßig unter den Elementen verteilt wird:
Normalerweise werden die col Kolumnen in der Reihenfolge dargestellt, wie sie im Code erwähnt werden. Diese Reihenfolge können Sie jedoch ändern mit
order
Das hat dann folgendes Ergebnis zur Folge:
Für diesen Zweck können Sie auch order-first, für die erste col in der Reihe, und order-last, für die letzte col in der Reihe, verwenden. Das ganze funktioniert über col Klasse.
Eine Andere Möglichkeit in die Positionierung einzugreifen ist offset . Im Beispiel Code oben besetzen Sie von den 12 Kolumnen des Bootstrap 5 Gridsystems 10. Mit offset-1 können Sie bei einer Kolumne leeren Raum einfügen. Dies geschieht von links, nach rechts.
Das war es für diesen Post. Bis bald.
Kommentare
Kommentar veröffentlichen