Ich versuche, meine Twitter Bootstrap 2 Navbar zu Bootstrap 3 zu migrieren. Ich habe 3 Teile in meiner Navbar.
"myContent1" und "myContent2" sind immer sichtbar. "myContent3" wird für kleine Bildschirme ausgeblendet. Wenn ich jedoch in einem kleinen Bildschirmgerät auf die Schaltfläche "Gestapelt" klicke, wird das ausgeblendete Menü nicht geöffnet. Nichts passiert, wenn ich auf die Schaltfläche klicke.
Ich habe es in eine Geige gelegt: Ссылка
%Vor% Bearbeiten: Mit dem Vorschlag einer Person setze ich "toggle button", aus dem Abschnitt navbar-header
. Und ich habe dem Button Button top:0 and right:0
absolute style gegeben. Aber in diesem Fall, wenn der Bildschirm sehr klein ist, dringt myContent2
in die Schaltfläche ein. Sie können dieses Verhalten von diesem sehen: Ссылка
Edit2: Ich brauche dieses Verhalten:
Für große Bildschirme ist alles sichtbar.
Bei kleineren Bildschirmen ist myContent2
sichtbar, myContent3
ist ausgeblendet. myContent3
wird nicht geschlossen, wenn auf die Schaltfläche geklickt wird.
Bei sehr kleinen Bildschirmen wird myContent2
in der nächsten Zeile angezeigt. So wird myContent2
und button nicht miteinander in Konflikt geraten.
Das Dropdown-Element nimmt die gesamte Breite der Navigationsleiste auf und verhindert, dass die Schaltfläche funktioniert. Um Dinge zu beheben, können Sie einen höheren Z-Index für Ihre Markenverknüpfung und die Navigationsschaltfläche festlegen:
%Vor%Bei den anderen Problemen, die im Abschnitt Kommentare angesprochen wurden, mussten die Dropdown-Verknüpfung und die Einfügemarke in einem Bereich umbrochen werden, damit sie als einzelnes Element umschlossen wurden und eine Medienabfrage verwendet wurde, um die Verknüpfung in der Anzeige anzuzeigen zentrieren, wenn es in eine zweite Zeile fällt:
HTML
%Vor%CSS
%Vor%Ich denke, Sie sollten responsive Utility-Klassen mit Unterbrechungen der Bildschirmbreite wie:
verwenden %Vor%Weitere Informationen: Ссылка
Versuchen Sie nicht, Layout-Mechanismen zu überschreiben, die mit Bootstrap bereitgestellt werden, und erstellen Sie Ihr Layout zunächst im ersten Zustand, und überschreiben Sie dann die Sichtbarkeit mit den von mir erwähnten Klassen.
Tags und Links html jquery css twitter-bootstrap