Bootstrap Multi-Level-Navbar - Wie verhindert man, dass Inhalt kollabiert
Erstens, ich schätze, das ist ein schönes Beispiel dafür, wie man mit Bootstrap Multi-Level-Navbars erreichen kann (es war etwas, mit dem ich schon lange Probleme hatte)
Zweitens habe ich eine Frage, die das Verhindern des Kollabierens von Inhalten auf der Navigationsleiste betrifft.
Meine Navigationsleiste hat drei Zeilen, zwei Standardeinstellungen für die Navigationsleiste und eine Navigationsleiste sowie drei Schaltflächen zum Steuern der einzelnen Abschnitte, wenn sie ausgeblendet ist:
Code:
%Vor% Wenn es nicht minimiert ist ( so soll es aussehen )
Wenn es minimiert ist ( das ist es, was es gerade tut )
Ich will das nicht ( was es gerade tut )
Ich möchte das ... ( wenn es minimiert ist )
... und das ( wenn es erweitert wird )
Die einzige Möglichkeit, dies zu erreichen, ist, zwei Dropdown-Tasten zu haben; eine, die für sm, md und lg angezeigt wird, und eine, die nur in xs angezeigt wird. Ich mag diesen Ansatz nicht besonders, da er Inhalte dupliziert - obwohl es nicht viele Inhalte sind, aus vielen Perspektiven, ist das nicht besonders schön.
Irgendwelche Ideen, wie ich das erreichen kann?
5 Antworten
Sie können ein doppeltes Dropdown-Menü für die Responsive Mobile-Ansicht hinzufügen und die andere Ansicht ausblenden, ich aktualisiere nur Ihre Geige .. hier überprüfen
HTML
%Vor%
CSS
%Vor% Sie können 2 x .navbar-header erstellen. Eine für .navbar-brand und linke .navbar-toggle -Schaltfläche und eine für die Sprachen .dropdown und rechte .navbar-toggle -Schaltflächen.
#siteNav block musste nach 2. .navbar-header sein, damit der Kollaps unterhalb der Hauptnavigationsleiste im xs-Bildschirm erscheint. Deshalb habe ich eine benutzerdefinierte Klasse hinzugefügt, um die divs in SM- und größeren Bildschirmen neu anzuordnen.
Vervollständigen Sie den Code in jsfiddle .
Sie können ein doppeltes Dropdown-Menü für die Responsive Mobile-Ansicht hinzufügen und das andere Dropdown-Menü ausblenden,
HTML,
%Vor%
CSS,
%Vor%Siehe das Beispiel: Ссылка
Jedenfalls, wenn Sie das Dropdown nicht duplizieren möchten, können Sie einfach einige Änderungen am Markup vornehmen und einige knifflige Stile hinzufügen,
HTML,
%Vor%CSS,
%Vor%Siehe das Beispiel: Ссылка
Hier ist wie ein Problem gelöst wurde. Die Schaltfläche aus dem Formular verschoben und einige Stile für Bootstrap-Klassen hinzugefügt, Details:
%Vor%
CSS:
%Vor%Tags und Links html css twitter-bootstrap