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>