twitter-bootstrap – Twitter Bootstrap仅在电话上折叠组

发布时间：2020-12-18 00:28:10 所属栏目：安全来源：网络整理

导读：我有一个使用Twitter Bootstrap编写的网站.我在网站上有一组我想要折叠的按钮,但仅限于在手机上查看网站时.因此,当用户在他们的计算机上查看该网站时,他们将看到所有按钮,但当他们在手机上时,他们只会看到一个按钮,上面写着“更多细节”,当他们按下它时,所有

我有一个使用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>

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

解决方法

看看这是否对您有所帮助： 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!