Jquery 引导下拉菜单在xs视图中无法正确折叠（低于768px）

我使用的是从CDN加载的Bootstrap3，我对默认断点没有问题，我添加了一些css，根据断点的不同来定位ULs

以下是我的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>

---

我只希望导航的drowdown菜单的行为与桌面视图中的一样，但我不知道如何解决这个问题。

当它向下折叠到移动视图时，引导将下拉菜单应用于导航栏链接。您需要用默认的下拉css覆盖引导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);
}

---

快速摆弄它

您应该发布呈现的HTML（输出）。

.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);
}