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

Question

我正在使用从 CDN 加载的 Bootstrap 3，我可以使用默认断点，我添加了更多的 css 以不同地定位 UL，具体取决于断点。

here is a picture with an overview

这是我的 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);
}

快点搞定https://jsfiddle.net/1bkdejed/