Bootstrap di Twitter Collapse Group Only On Phone

Question

Ho un sito scritto utilizzando Twitter Bootstrap. Ho un gruppo di pulsanti sul sito che voglio comprimere ma solo quando il sito viene visualizzato su un telefono. Quindi, quando un utente sta visualizzando il sito sul proprio computer, vedranno tutti i pulsanti, ma quando saranno sul telefono vedranno solo un pulsante che dice qualcosa come "ulteriori dettagli" e quando lo premono, tutti i pulsanti mostreranno.

Finora ho ottenuto:

<div class="collapse-group"> 
    <ul class="menu row collapse" id="IndustriesMenu"> 
    <li><a class="btn" href="#">Button 1</a></li> 
    <li><a class="btn" href="#">Button 2</a></li> 
    <li><a class="btn" href="#">Button 3</a></li> 
    </ul> 
    <a class="btn" data-toggle="collapse" data-target="#IndustriesMenu">View details</a> 
</div> 

Questo attualmente funziona ma i pulsanti sono di default è crollato in tutti i dispositivi non solo telefoni. Qualsiasi aiuto è sempre apprezzato. Grazie.

Answer 1

Vedi se questo ti aiuta: http://jsfiddle.net/panchroma/7fYVD/

Si tratta di una versione semplificata della barra di navigazione sensibile sul http://twitter.github.com/bootstrap/components.html#navbar

HTML è qui di seguito.

Buona fortuna!

<div class="navbar"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".IndustriesMenu" style="color:black;">view details 
     </a> 
     <!-- Everything you want hidden at 940px or less, place within here --> 
     <div class="nav-collapse collapse IndustriesMenu"> 
     <ul class="nav"> 
      <li><a href="#">Button 1</a></li> 
      <li><a href="#">Button 2</a></li> 
      <li><a href="#">Button 3</a></li> 
     </ul> 
     </div><!-- /.nav-collapse --> 
    </div> 
    </div><!-- /navbar-inner --> 
</div>