引導 - 響應菜單修復

Question

http://www.bootply.com/jwGIUdSuHM

我使用的引導，我有在頂部兩個菜單。一旦我縮小了窗口，當點擊我的帳戶時，我的「響應式視圖」就會顯示爲這樣。注意重疊的選項（不好）。我該如何解決這個問題？

我試着將它設置爲700，而不是約300像素：

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 700px; } 

...雖然這個問題沒有了，它並不完全做到這一點對我來說，因爲它讓我的菜單延伸到了手機上。那麼，如何在保持我的菜單高度一致的同時修復這種難看的重疊？

CSS

body { margin-top: 125px; } 

h1 {text-transform:uppercase;} 

/* Header Nav*/ 
#faves, #cart {border:none;} 
#nav {text-transform:uppercase;} 
.multi-col-4 {width:820px;} 
.multi-col-2 {width:400px;} 


@media (max-width: 890px) { 
    body { margin-top: 65px; } 

    /* Nav*/ 
    .multi-col {width:100%;} 
} 

HTML

<form> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
       <button id="faves" type="button" class="navbar-toggle btn-link btn-lg"> <span class="sr-only">Favorites</span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> 
       <button id="cart" type="button" class="navbar-toggle btn-link btn-lg"> <span class="sr-only">Shopping Cart</span> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> </button> 
       <a class="navbar-brand" href="#">Logo</a> </div> 
      <!-- end navbar-header --> 

      <div id="nav" class="navbar-collapse collapse"> 
       <div id="navTop" class="navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown hidden-xs"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Cart (2) <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Something else here</a></li> 
           <li class="divider"></li> 
           <li><a href="#" class="btn btn-primary btn-block">View Cart</a></li> 
          </ul> 
         </li> 
         <li class="dropdown hidden-xs"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Favorites (6) <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Something else here</a></li> 
           <li class="divider"></li> 
           <li><a href="#" class="btn btn-primary btn-block">View All Favorites</a></li> 
          </ul> 
         </li> 
         <li> <a href="#">Option a</a> </li> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li> 
            <div class="multi-col multi-col-4"> 
             <ul class="list-unstyled col-md-4" role="menu"> 
              <li class="dropdown-header">Option 2</li> 
              <li><a href="#">Option 3</a></li> 
              <li><a href="#">Option 4</a></li> 
              <li><a href="#">Option 5</a></li> 

             </ul> 
             <ul class="list-unstyled col-md-4" role="menu"> 
              <li class="dropdown-header">Option 6</li> 
              <li><a href="#">Option 7</a></li> 
              <li><a href="#">Option 8</a></li> 
              <li><a href="#">Option 9</a></li> 
              <li><a href="#">Option 10</a></li> 
              <li><a href="#">Option 11</a></li> 
              <li><a href="#">Option 12</a></li> 
              <li><a href="#">Option 13</a></li> 
             </ul> 
             <ul class="list-unstyled col-md-4" role="menu"> 
              <li class="dropdown-header">Option 14</li> 
              <li><a href="#">Option 15</a></li> 
              <li><a href="#">Option 16</a></li> 
              <li><a href="#">Option 17</a></li> 
              <li><a href="#">Option 18</a></li> 
              <li><a href="#">Option 19</a></li> 
              <li><a href="#">Option 20</a></li> 
             </ul> 
             <ul class="list-unstyled col-md-4" role="menu"> 
              <li class="dropdown-header">Option 21</li> 
              <li><a href="#">Option 21</a></li> 
              <li><a href="#">Option 22</a></li> 
              <li><a href="#">Option 23</a></li> 
              <li><a href="#">Option 24</a></li> 
              <li><a href="#">Option 25</a></li> 
             </ul> 
            </div> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
       <div id="navBottom" class="navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option b <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li> 
            <div class="multi-col multi-col-4"> 
              <ul class="list-unstyled col-md-4" role="menu"> 
               <li class="dropdown-header">Another action</li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Another action</a></li> 
              </ul> 
              <ul class="list-unstyled col-md-4" role="menu"> 
               <li class="dropdown-header">Another action</li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Another action</a></li> 
              </ul> 
              <ul class="list-unstyled col-md-4" role="menu"> 
               <li class="dropdown-header">Other Products</li> 
               <li><a href="#">Action</a></li> 
               <li><a href="#">Another action</a></li> 
              </ul> 
              <ul class="list-unstyled col-md-4" role="menu"> 
               <li class="dropdown-header">Another action</li> 
               <li><a href="#">Another action</a></li> 
               <li><a href="#">Another action</a></li> 
              </ul> 

            </div> 
           </li> 
          </ul> 
         </li> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option c <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
          </ul> 
         </li> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option d <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
          </ul> 
         </li> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option e <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li> 
            <div class="multi-col multi-col-2"> 
             <ul class="list-unstyled col-md-4" role="menu"> 
              <li class="dropdown-header">Account</li> 
              <li><a href="#">Another action</a></li> 
              <li><a href="#">Something else here</a></li> 
             </ul> 
             <ul class="list-unstyled col-md-4" role="menu"> 
              <li class="dropdown-header">Tools</li> 
              <li><a href="#">Action</a></li> 
              <li><a href="#">Another action</a></li> 
             </ul> 
            </div> 
           </li> 
          </ul> 
         </li> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option f <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li> 
            <div class="multi-col multi-col-2"> 
             <ul class="list-unstyled col-md-4" role="menu"> 
              <li class="dropdown-header">Account</li> 
              <li><a href="#">Another action</a></li> 
              <li><a href="#">Something else here</a></li> 
             </ul> 
             <ul class="list-unstyled col-md-4" role="menu"> 
              <li class="dropdown-header">Tools</li> 
              <li><a href="#">Action</a></li> 
              <li><a href="#">Another action</a></li> 
             </ul> 
            </div> 
           </li> 
          </ul> 
         </li> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option g <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Another action</a></li> 
          </ul> 
         </li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="active"><a href="#">Another action</a></li> 
        </ul> 
       </div> 
      </div> 
      <!-- end nav --> 
     </div> 
     <!-- end container-fluid --> 
    </nav> 


</form> 

Answer 1

我把它解決了與這兩條線：

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: none; } 
#nav {max-height:400px;}