Bootstrapドロップダウンメニューがxs-view（768px以下）で正しく折りたたまれない

Question

CDNから読み込まれたBootstrap 3を使用しています。デフォルトのブレークポイントでOKです。いくつかのCSSを追加しました。ブレークポイント。ここ

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

は、私はちょうどナビゲーションのdrowdown-メニューはデスクトップビューでのように動作しますしかし、私はこれを修正する方法を理解することはできません。

Answer 1

モバイルビューに折りたたまれたときのブートストラップは、ナビゲーションバーのリンクにドロップダウンメニューを適用します。ブートストラップの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/