twitter-bootstrap 折叠时的 Bootstrap 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45767827/
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 dropdown menu when collapsed
提问by Dercni
Using bootstrap I have created a navbar using the bootstrap example online: https://getbootstrap.com/docs/3.3/components/#navbar
使用引导程序，我使用在线引导程序示例创建了一个导航栏：https: //getbootstrap.com/docs/3.3/components/#navbar
My navbar includes a single dropdown menu which works well however on mobiles the navbar collapses into a dropdown menu which in turn contains my dropdown menu. i.e. a dropdown menu within a dropdown menu
我的导航栏包含一个下拉菜单，它运行良好，但在移动设备上导航栏会折叠成一个下拉菜单，该下拉菜单又包含我的下拉菜单。即下拉菜单中的下拉菜单
Is it possible to have my downdown menu work normally however when the navbar collapses have the dropdown menu items listed as menu items in the collapsed menu not within a dropdown?
是否可以让我的下拉菜单正常工作，但是当导航栏折叠时，下拉菜单项被列为折叠菜单中的菜单项而不是在下拉列表中？
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
回答by Nikola Kostov
is this what you are looking for:jsfiddle
这就是你要找的：jsfiddle
@media only screen and (max-width: 767px) {
.nav>li>a.dropdown-toggle {
display: none;
}
.nav .dropdown-menu {
display:block;
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
updated version: jsfiddle.net
更新版本：jsfiddle.net
回答by TattyFromMelbourne
I'm a bit late to the party but I was reading this looking for a way to "uncollapse" the dropdown menu on a mobile device. The css Nikola Kostov gave (below) is great, there is just one issue with it. The responsive breakpoint for bootstrap is at 768px, the official documentation at https://v4-alpha.getbootstrap.com/layout/overview/states:-
我参加聚会有点晚了，但我正在阅读这篇文章，寻找一种在移动设备上“展开”下拉菜单的方法。Nikola Kostov 提供的 css（如下）很棒，它只有一个问题。bootstrap 的响应断点在 768px，官方文档https://v4-alpha.getbootstrap.com/layout/overview/状态：-
// Medium devices (tablets, 768px and up)
@media (min-width: 768px)
So for everything smallerthan that you need to use
所以对于所有小于你需要使用的东西
@media only screen and (max-width: 767px) {
