twitter-bootstrap Bootstrap 将侧边栏菜单折叠到下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28254150/
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 Collapse sidebar menu to dropdown
提问by daliaessam
I have the left sidebar with vertical menu built with "nav nav-pills nav-stacked" what I want when the screen size is XS (mobile) this menu changes to suitable dropdown menu and start as closed/collapsed.
我的左侧边栏带有“nav nav-pills nav-stacked”构建的垂直菜单，当屏幕尺寸为 XS（移动）时我想要这个菜单更改为合适的下拉菜单并以关闭/折叠状态开始。
Here is my starting code:
这是我的起始代码：
http://www.bootply.com/zOy2IJumZO
http://www.bootply.com/zOy2IJumZO
The html code here also
这里的html代码也
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3">
<div class="panel panel-info">
<div class="panel-heading">Categories <span class="badge pull-right">12345</span></div>
<ul id="categories-menu" class="nav nav-pills nav-stacked">
<li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
<li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
<li id="cid-10"><a href="community">Community</a></li>
<li id="cid-2"><a href="electronics">Electronics</a></li>
<li id="cid-11"><a href="events">Events</a></li>
<li id="cid-12"><a href="fashion">Fashion</a></li>
<li id="cid-13"><a href="freebies">Freebies</a></li>
</ul>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Site statistics</div>
<ul class="list-unstyled">
<li>1000 Users</li>
<li>200 Online</li>
<li>300 Hidden</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9">
This is the right content column<br>
This is the right content column<br>
This is the right content column<br>
This is the right content column<br>
This is the right content column<br>
This is the right content column<br>
This is the right content column<br>
</div>
</div>
</div>
采纳答案by kostans3k
Wrap your ul with bootstrap collapse class:
用 bootstrap 折叠类包裹你的 ul：
<div class="collapse navbar-collapse" id="collapse">
<ul id="categories-menu" class="nav nav-pills nav-stacked">
<li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
<li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
<li id="cid-10"><a href="community">Community</a></li>
<li id="cid-2"><a href="electronics">Electronics</a></li>
<li id="cid-11"><a href="events">Events</a></li>
<li id="cid-12"><a href="fashion">Fashion</a></li>
<li id="cid-13"><a href="freebies">Freebies</a></li>
</ul>
</div>
Then add data-toggle and data-target to the element you want to toggle the menu. For example badge 12345 in your code:
然后将 data-toggle 和 data-target 添加到要切换菜单的元素。例如代码中的徽章 12345：
<span data-toggle="collapse" data-target="#collapse" class="badge pull-right">
