Twitter Bootstrap折叠组仅在电话上

Question

我有一个使用Twitter Bootstrap编写的网站。我在网站上有一组按钮，我只想在电话上查看网站时才折叠。所以当用户在他们的计算机上查看网站时，他们会看到所有的按钮，但是当他们在手机上时，他们只会看到一个按钮，显示“更多详情”，当他们按下时，所有按钮都会显示。

到目前为止我有：

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

目前这工作，但按钮都按默认方式折叠跨越并非所有的设备只是手机。任何帮助总是感激。 谢谢。

Answer 1

看看这可以帮助你：http://jsfiddle.net/panchroma/7fYVD/

这是响应导航栏上http://twitter.github.com/bootstrap/components.html#navbar

HTML简化版本如下。

祝你好运！

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