2013-09-29 6 views
5

Dato questo codice di menu da un modello boostrap, voglio che ogni voce di menu sia impilata e occupi l'intera larghezza quando la dimensione dello schermo viene rilevata come piccola. Essenzialmente, funzionalità identiche a quando si preme il pulsante del menu "tripla barra", tranne che l'utente non deve premerlo manualmente.Forza barra di spostamento statica bootstrap espandibile su piccolo schermo

Grazie in anticipo.

<!-- 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> 

risposta

7

Quello che ho capito è che si voleva fare tutte le voci di menu visibile di default senza che gli utenti dover fare clic sulla linea tripla menu (hamburger) e tutte le voci di menu devono essere impilati orizzontalmente sullo schermo più piccolo.

Il tuo codice sopra è a posto. Basta aggiungere una classe "in" al div navbar-collapse e tutto impostato.

<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> 

Ecco demo: http://jsfiddle.net/shekhardesigner/35gSz/

+1

Accertarsi di aver Bootstrap JS è incluso nella pagina. –

+0

Bingo, funziona perfettamente! –

Problemi correlati