我有一个使用 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>
关于twitter-bootstrap - Twitter Bootstrap 仅在电话上折叠组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14154744/