twitter-bootstrap Bootstrap 3.0.0 导航垂直折叠响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18905908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3.0.0 nav vertical collapse responsive
提问by David-IT
After many search without results, I try to send a post.
经过多次搜索没有结果，我尝试发送一个帖子。
I'm looking for a way for the nav-stacked (vertical menu) from bootstrap 3.0.0 (http://getbootstrap.com/components/#nav-pills) or my sidebare becomes collapsed when tablet or smartphone is used (such as navbar).
我正在为 bootstrap 3.0.0 ( http://getbootstrap.com/components/#nav-pills) 中的导航堆叠（垂直菜单）寻找一种方法，或者当使用平板电脑或智能手机时我的侧边栏会折叠起来（例如作为导航栏）。
I'm agree to use other component that nav-stacked if the result is a vertical responsive menu.
如果结果是垂直响应菜单，我同意使用其他导航堆叠的组件。
My code
我的代码
<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-->
Thank you in advance for your help :-)
预先感谢您的帮助 ：-）
回答by Deja Vu
Is that it ?
是吗？
<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>
Check fiddleout.
检查小提琴。
