仅在电话上使用 Twitter Bootstrap 折叠组 [英] Twitter Bootstrap Collapse Group Only On Phone

问题描述

我有一个使用 Twitter Bootstrap 编写的网站.我想折叠网站上的一组按钮，但仅当在手机上查看网站时才会折叠.因此，当用户在计算机上查看站点时，他们会看到所有按钮，但当他们使用电话时，他们只会看到一个按钮，上面写着更多详细信息"之类的内容，当他们按下按钮时，所有按钮都会显示出来.

到目前为止我有:

<ul class="菜单行折叠" id="IndustriesMenu"><li><a class="btn" href="#">按钮 1</a></li><li><a class="btn" href="#">按钮 2</a></li><li><a class="btn" href="#">按钮 3</a></li><a class="btn" data-toggle="collapse" data-target="#IndustriesMenu">查看详情</a>

这目前有效，但默认情况下按钮会在所有设备上折叠，而不仅仅是手机.任何帮助总是受到赞赏.谢谢.

解决方案

看看是否对您有帮助:http://jsfiddle.net/panchroma/7fYVD/

它是 http://twitter.github.com/上的响应式导航栏的简化版本bootstrap/components.html#navbar

HTML 在下面.

祝你好运！

<div class="navbar-inner"><div class="容器"><a class="btn btn-navbar" data-toggle="collapse" data-target=".IndustriesMenu" style="color:black;">查看详情</a><!-- 所有你想隐藏在 940px 或更小的地方，都放在这里 --><div class="nav-collapse collapse IndustriesMenu"><ul class="nav"><li><a href="#">按钮 1</a></li><li><a href="#">按钮 2</a></li><li><a href="#">按钮 3</a></li></div><!--/.nav-collapse -->
</div><!--/navbar-inner -->

I have a site written using Twitter Bootstrap. I have a group of buttons on the site that I want to collapse but only when the site is viewed on a phone. So when a user is viewing the site on their computer they will see all of the buttons but when they are on the phone they will just see one button saying something like 'more details' and when they press it all of the buttons will reveal.

So far I have got:

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

This currently works but the buttons are by default collapsed across all devices not just phones. Any help is always appreciated. Thank you.

解决方案

See if this helps you: http://jsfiddle.net/panchroma/7fYVD/

It's a simplified version of responsive navbar on http://twitter.github.com/bootstrap/components.html#navbar

HTML is below.

Good luck!

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

这篇关于仅在电话上使用 Twitter Bootstrap 折叠组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！