Bootstrap statisch navbar Kraft erweitern auf kleinem Bildschirm

Question

Angesichts dieser Menü-Code aus einer Vorlage Boostrap, ich möchte, dass jeder Menüpunkt sowohl stapeln und die volle Breite aufnehmen, wenn die Bildschirmgröße als klein erkannt wird. Im Wesentlichen identische Funktionalität wie beim Drücken der Menüschaltfläche "Dreifach-Leiste", außer dass der Benutzer sie nicht manuell drücken muss.

Vielen Dank im Voraus.

<!-- Static navbar --> 
    <div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 

Answer 1

Was ich verstehe, ist, dass Sie sollten alle Menüpunkte standardmäßig sichtbar, ohne dass Benutzer mit Klick auf Tripellinie (Hamburger) Menü und alle Menüpunkte horizontal gestapelt auf kleineren Bildschirm werden machen wollte.

Ihr Code oben ist in Ordnung. Fügen Sie einfach eine Klasse "in" zu der navbar-collapse div und alle setzen.

<div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div class="navbar-collapse collapse in"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 

Hier Demo: http://jsfiddle.net/shekhardesigner/35gSz/