Question

使用bootstrap我在线使用bootstrap示例创建了一个导航栏： 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>

Answer 1

这就是你要找的东西：jsfiddle

@media only screen and (max-width: 768px) {
  .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

Answer 2

我参加派对有点晚了，但我正在读这篇文章，希望找到一种方法来解决问题＆＃34;移动设备上的下拉菜单。 css 尼古拉·科斯托夫（下图）给出的很好，只有一个问题。引导程序的响应断点是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) {

折叠后的Bootstrap下拉菜单

2 个答案: