Bootstrap 4: Persistente Navigationsleistenelemente außerhalb des minimierten Containers

Das Navigieren auf einer Website kann frustrierend sein, wenn wichtige Links, wie z. B. Social-Media-Symbole, verschwinden, wenn die Navigationsleiste auf eine kleinere reduziert wird Bildschirme. Glücklicherweise bietet Bootstrap 4 eine elegante Lösung, um bestimmte Navigationsleistenelemente auch dann sichtbar zu halten, wenn das Menü reduziert ist.

Problem

Das Problem tritt auf, wenn die Navigationsleiste so eingestellt ist, dass sie minimiert wird, wenn die Bildschirmbreite schmaler wird . Dieses Verhalten wird durch die Klasse .collapse gesteuert. Standardmäßig werden alle Elemente im .collapse-Container ausgeblendet, wenn die Minimierung aktiviert ist.

Lösung

Um zu verhindern, dass bestimmte Navigationsleistenelemente mit der Minimierung verschwinden, verschieben Sie sie einfach aus dem .collapse-Container . Dies kann mithilfe der Dienstprogrammklassen „order-*“ erreicht werden, um die Flexbox-Reihenfolge der Elemente anzupassen.

Codebeispiel

In diesem Beispiel werden die Social-Media-Symbole in einem Container außerhalb des .collapse-Elements platziert. Die Klassen d-flex und order-* stellen sicher, dass die Symbole in der richtigen Reihenfolge und Position bleiben, wenn die Navigationsleiste reduziert wird.