Twitter Bootstrap 3 navbar collapse
Ich versuche zu migrieren, meine Twitter-Bootstrap 2 navbar von Bootstrap 3. Ich habe 3 Teile in meine navbar.
"myContent1" und "myContent2" wird immer sichtbar sein. "myContent3" wird reduziert werden, für kleine Bildschirme. Aber wenn ich auf gestapelt-Schaltfläche in einem kleinen Bildschirm-Gerät, reduziertes Menü nicht geöffnet. Es passiert nichts, wenn ich auf die Schaltfläche klicken.
Ich Sie in eine fiddle: http://jsfiddle.net/mavent/LDP8K/6/
<nav class="navbar navbar-inverse navbar-fixed-top navbar-sam-main" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="" title="aaaa" id="MyContent1">
MySite
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mycol">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav navbar-left" id="myContent2">
<li class="dropdown" id="users">
<a class="navbar-brand" href="" title="aaa" style="display:inline-block;padding-right:0px;">
<img src="" width="24" height="24" alt="aaaa">
MyName
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#users" style="display:inline-block;padding-left:0px;">
<b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999;"></b>
</a>
<ul class="dropdown-menu">
<li><a href=""><img src="" width="24" height="30"/> OtherName</a></li>
<li class="divider"></li>
<li><a href="">AAAA</a></li>
<li><a href="">BBB</a></li>
</ul>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-mycol">
<ul class="nav navbar-nav navbar-right" id="myContent3">
<li><a href="">UUUU</a></li>
<li><a href="">YYYYY</a></li>
<li class="dropdown" id="wer">
<a class="dropdown-toggle" data-toggle="dropdown" href="#wer">Tools
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="">aaaa</a></li>
<li><a href="">bbbb</a></li>
<li><a href="">cccc</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>Edit: Mit einer person der Vorschlag, den ich "toggle-button", aus der navbar-header Abschnitt. Und ich gab button top:0 and right:0 absoluten Stil auf die Schaltfläche. Aber In diesem Fall, wenn der Bildschirm ist sehr klein, myContent2 dringt in Knopf. Sie können sehen, dass das Verhalten von diesem: http://jsfiddle.net/mavent/paXt9/2/
Edit2: ich muss dieses Verhalten:
Für große Bildschirme, alles ist sichtbar.
Für kleinere Bildschirme, myContent2 sichtbar ist, myContent3 ist zusammengebrochen. myContent3 ist uncollapsed, wenn die Schaltfläche geklickt wird.
Für sehr kleine Bildschirme, myContent2 gezeigt wird, in der nächsten Zeile. SomyContent2 und button nicht widersprach jedem anderen Ort.
- Versuchen Sie, das schließende tag des
navbar-headernur nach dem toggle-button: jsfiddle.net/koala_dev/LDP8K/8 - In diesem Fall myContent2 ist sichtbar ok. Aber myContent2 ist verpackt zur nächsten Zeile, nachdem die Anzeige-Taste. Ich will myContent2 zwischen Marke und Knopf. Ich möchte nicht eine weitere Zeile vom Bildschirm. Fiddle: jsfiddle.net/mavent/M6XqB/1
- Dann möchten Sie vielleicht festlegen der z-index der Schaltfläche, die angezeigt wird auf der Oberseite des myContent2: jsfiddle.net/koala_dev/LDP8K/9
- Es scheint sehr nah an der Lösung. Aber falls der Bildschirm ist klein, Cursor geht zur nächsten Zeile aber "MeinName" text bleiben in der oberen Zeile. Ist es möglich, Sie zu beheben, zusammen, so können Sie Sie bewegen sich zusammen ? jsfiddle.net/mavent/fgNZx
- Versuchen Sie das einwickeln beide Elemente in einem container
<span>: jsfiddle.net/koala_dev/fgNZx/1 - Ich danke Ihnen sehr. Das funktioniert sehr gut. Es scheint, wie wenn der "MyName" - Teil ist in Sekunden Zeile ist Linksbündig ausgerichtet. Ist es möglich, um es in der Mitte der zweiten Zeile? Bitte können Sie nach einer Antwort, damit kann ich akzeptieren?
- Ein weiteres komisches Problem, wenn die Navigationsleiste ausgeblendet ist, "MySite" - link ist unklickbaren. Wenn der Bildschirm ist groß, es ist klickbar: jsfiddle.net/mavent/fgNZx/2
- Ich konnte immer noch nicht finden, warum die Letzte Geige der "MySite" brand-link ist nicht anklickbar bei kleinen Bildschirmen: jsfiddle.net/mavent/fgNZx/2
- Sorry für die späte Antwort, Sie einfach nur anpassen müssen, um den z-index der link wie wir es getan haben, bevor Sie mit der toggle-Taste, und wenn Sie möchten, richten Sie den Inhalt auf der center-wenn es fällt, in einer zweiten Zeile können Sie festlegen, bis eine Medien-Abfrage, nur beachten Sie, dass Sie benötigen würde, um die Berechnung der Punkt, an dem der Inhalt nicht in eine Zeile passen und es funktioniert möglicherweise nicht einheitlich auf allen Geräten
- jsfiddle.net/koala_dev/fgNZx/4
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den dropdown-element nimmt die gesamte navbar Breite und verhindert, dass die Taste von der Arbeit, die Dinge zu beheben, können Sie einen höheren z-index, um Ihre Marke zu verknüpfen und auf die navbar-toggle-button:
Für die anderen Probleme, die gebracht wurden, bis in den Kommentaren, die Updates waren wickeln Sie das dropdown-link und die caret-Zeichen in einer Zeitspanne zu machen, Sie zu wickeln, wie ein einzelnes element und mit einem media-query für die link-Anzeige in der Mitte, wenn es fällt, um eine zweite Zeile:
HTML
CSS
Ich glaube, Sie sollten reagieren utility-Klassen, mit Schirm Breite Haltepunkte, wie zum Beispiel:
Mehr info: http://getbootstrap.com/css/#responsive-utilities
Versuchen Sie, nicht zu überschreiben, layout-Mechanismen mit Bootstrap und erstellen Sie Ihr layout in den ersten Zustand zunächst, dann überschreiben Sichtbarkeit mit den Klassen, die ich erwähnt habe.