经过多次搜索没有结果,我尝试发送一个帖子。
我正在为 bootstrap 3.0.0 ( http://getbootstrap.com/components/#nav-pills ) 中的导航堆叠(垂直菜单)寻找一种方法,或者在使用平板电脑或智能手机(例如导航栏)时,我的侧边栏会折叠。
如果结果是垂直响应菜单,我同意使用导航堆叠的其他组件。
我的代码
<div class="col-md-2">
<div class="panel panel-default" id="sidebar" >
<div class="panel-heading" style="background-color:#888;color:#fff;" data-target="#test">Sidebar</div>
<div class="panel-body" id="test">
<ul class="nav nav-stacked nav-collapse">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<hr>
<div class="col col-span-12">
<i class="icon-2x icon-facebook"></i>
<i class="icon-2x icon-twitter"></i>
<i class="icon-2x icon-linkedin"></i>
<i class="icon-2x icon-pinterest"></i>
</div>
</div><!--/panel body-->
</div><!--/panel-->
</div><!--/end left column-->
预先感谢您的帮助 :-)
最佳答案
是这样吗?
<div class="col-md-2">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<div class="panel-heading">Sidebar22</div>
<ul class="nav nav-stacked">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!--/end left column-->
<div class="col-md-10">
</div>
查看fiddle出去。
关于twitter-bootstrap - Bootstrap 3.0.0 导航垂直折叠响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18905908/