Bootstrap 下拉菜单在 xs 视图中无法正确折叠（768 像素以下）

Question

我正在使用从 CDN 加载的 Bootstrap 3，我可以使用默认断点，我添加了一些 css 以根据断点不同地定位 UL。

这是我的 html 代码：

<nav class="navbar navbar-inverse">
<div class="container">
  <ul class="nav navbar-nav">
    <li class="button">
      <button type="button" class="navbar-toggle dropdown-toggle hide" data-toggle="dropdown">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <ul class="dropdown-menu">
        <li>
  <a href="http://localhost/category/1" title="ObstkÃ¶rbe">
    ObstkÃ¶rbe
  </a>
</li>


<li>
  <a href="http://localhost/category/2" title="Frisches Obst">
    Frisches Obst
  </a>
</li>


<li>
  <a href="http://localhost/category/3" title="Exotische FrÃ¼chte">
    Exotische FrÃ¼chte
  </a>
</li>


<li>
  <a href="http://localhost/category/4" title="GetrÃ¤nke">
    GetrÃ¤nke
  </a>
</li>



      </ul>
    </li>
  </ul>
  <ul class="nav navbar-nav autoMargin navBrand">
    <li>
      <a href="http://localhost/" title="Web-based shop system" class="navbar-brand">Shop</a>
    </li>
  </ul>

  <ul class="nav navbar-nav collapse navbar-collapse text-uppercase"><li>
  <a href="http://localhost/category/1" title="ObstkÃ¶rbe">
    ObstkÃ¶rbe
  </a>
</li>


<li>
  <a href="http://localhost/category/2" title="Frisches Obst">
    Frisches Obst
  </a>
</li>


<li>
  <a href="http://localhost/category/3" title="Exotische FrÃ¼chte">
    Exotische FrÃ¼chte
  </a>
</li>


<li>
  <a href="http://localhost/category/4" title="GetrÃ¤nke">
    GetrÃ¤nke
  </a>
</li>


</ul>

  <ul class="nav navbar-nav navbar-right">
    <li>
      <a href="http://localhost/#" class="noEvent dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span> Suche</a>
      <ul class="dropdown-menu wider">
        <li>
          <form role="form" class="form-horinzontal container-fluid">
            <input id="searchBar" name="identifier" placeholder="Suchbegriff hier eingeben.." required="" class="iterate form-control" data-validate="search" type="text">
            <input name="ressource" value="search" type="hidden">
            <input value="Suche" class="getRequest preventCartLogin btn btn-success form-control" type="submit">
          </form>
        </li>
      </ul>
    </li>
    <li id="login" class="dropdown"><a href="http://localhost/#" class="noEvent dropdown-toggle" data-toggle="dropdown">Hallo! <span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a href="http://localhost/formular/signIn">Einloggen</a></li>
  <li><a href="http://localhost/formular/signUp">Neu Anmelden</a></li>
</ul>


</li>
    <li id="cart"><a href="http://localhost/view/cart" class="noEvent"><span class="glyphicon glyphicon-shopping-cart"></span> Warenkorb</a>


</li>
  </ul>

</div>


</nav>

这是我的习惯 css:

div.container header nav, div.lead {
    margin: 0;
}
.navbar, .jumbotron {
    margin-bottom: 0;
}
.navbar-inverse {
    border-radius: 0;
}

.dropdown-menu.wider{
    width: 250px;
}
.navbar.navbar-inverse ul a{
    color: #fff;
}
.navbar.navbar-inverse ul.dropdown-menu a{
    color: inherit;
}
.noMargin{
    margin: 0;
}
.noPadding{
    padding: 0;
}
.autoMargin{

}
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .collapsing {
        overflow: hidden !important;
    }
    ul.nav button{
        display: block !important;
    }
    button span{
        background-color: #fff;
        border-radius: 1px;
        display: block;
        height: 2px;
        width: 22px;
    }
}
@media (max-width: 767px) {
    .navbar-header {
        float: left;
    }
    li.button{
        padding-left: 15px;
    }
    ul.nav button{
        display: block !important;
        float: left;
    }
    button span{
        background-color: #fff;
        border-radius: 1px;
        display: block;
        height: 2px;
        width: 22px;
    }
    nav ul{
        display: inline-flex;
        margin-right: 15px !important;
        float: left !important;
    }
    .navbar-right{
        float: right !important;
    }
}
@media (max-width: 485px) {
    ul.navBrand{
        display: none !important; 
    }
}

我只想让导航的下拉菜单在桌面视图中表现得像桌面视图，但我不知道如何解决这个问题。

Answer 1

Bootstrap 当它向下折叠到移动视图时，会将下拉菜单应用于导航栏链接。您需要使用默认下拉菜单 css 覆盖引导程序 css 或创建您自己的。

.navbar-nav .open .dropdown-menu {
    position: absolute; 
    left: 0;
    z-index: 1000;
    float: left;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

快速 fiddle https://jsfiddle.net/1bkdejed/

Bootstrap 下拉菜单在 xs 视图中无法正确折叠（768 像素以下）

Bootstrap Dropdown menu does not collapse correctly in xs-view (below 768px)

html

css

jquery

media-queries

twitter-bootstrap