折叠时的引导下拉菜单答案

【问题标题】：Bootstrap dropdown menu when collapsed折叠时的引导下拉菜单
【发布时间】：2017-08-19 04:58:00
【问题描述】：

使用引导程序我已经使用在线引导程序示例创建了一个导航栏： https://getbootstrap.com/docs/3.3/components/#navbar

我的导航栏包含一个下拉菜单，它运行良好，但是在手机上导航栏折叠成一个下拉菜单，该下拉菜单又包含我的下拉菜单。即下拉菜单中的下拉菜单

是否可以让我的下拉菜单正常工作，但是当导航栏折叠时，下拉菜单项列为折叠菜单中的菜单项而不是在下拉菜单中？

<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>

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

这是你要找的吗：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;
  }
}

更新版本：jsfiddle.net

【讨论】：

谢谢尼古拉，但不是真的。您的解决方案仍然显示下拉列表（扩展），但是它被禁用，这可能同样令人困惑。我只是在折叠菜单中显示下拉项目。即避免下拉场景中的下拉。
我更新了我的答案检查，看看这是不是你需要的

【解决方案2】：

我参加聚会有点晚了，但我正在阅读这篇文章，寻找一种在移动设备上“展开”下拉菜单的方法。的CSS Nikola Kostov 给出的（下）很棒，只有一个问题。 bootstrap 的响应断点在 768px，https://v4-alpha.getbootstrap.com/layout/overview/ 的官方文档指出：-

// Medium devices (tablets, 768px and up)
@media (min-width: 768px)

所以对于所有小于你需要使用的东西

@media only screen and (max-width: 767px) {

【讨论】：