Twitter Bootstrap 3 Navbar-Kollaps

8

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.

    
trante 13.09.2013, 18:53
quelle

2 Antworten

7

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%     
koala_dev 07.10.2013, 07:20
quelle
0

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.

    
Rafal Pastuszak 19.09.2013 11:12
quelle

Tags und Links