當菜單摺疊時nav-pills的子菜單行爲

Question

我已經閱讀了一些關於如何使用pill作爲菜單的其他討論，並且我也可以讓它們在摺疊菜單時正確運行（僅顯示切換按鈕時） 。

問題是當一個藥丸有一個子菜單，在這種情況下，當菜單被摺疊時，當我點擊切換按鈕時，藥片出現堆疊而不是一邊一邊，但是當我點擊一個藥片時有一個子菜單（在這種情況下爲鏈接1），子菜單顯示爲下面元素的正常下拉菜單。

我想要與navbar具有相同的行爲，當你點擊一個菜單項有一個子菜單時，sumbenu向下滑動下一個菜單項，它不會出現在它們上面。

現在一些代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script> 
 
     $(document).ready(function() { 
 
      $('#nav-menu').on('show.bs.collapse', function() { 
 
       $('.nav-pills').addClass('nav-stacked'); 
 
      }); 
 
    
 
      $('#nav-menu').on('hide.bs.collapse', function() { 
 
       $('.nav-pills').removeClass('nav-stacked'); 
 
      }); 
 
     }); 
 
    </script> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-menu"> 
 
       <span class="sr-only">Toggle menu</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
    
 
     <div class="collapse navbar-collapse" id="nav-menu"> 
 
      <ul class="nav nav-pills"> 
 
       <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1 <b class="caret"></b></a> 
 
        <ul class="dropdown-menu multi-level"> 
 
         <li><a href="#">Action</a></li> 
 
         <li><a href="#">Another action</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Link 2</a></li> 
 
       <li><a href="#">Link 3</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>

是否有可能有子菜單的行爲如我所願？

Answer 1

兩件事需要解決：溢出.navbar-collapse.in

.nav > li

1. ，使導航鏈接在一條線上

.nav > li { 
 
display: inline-block !important; 
 
} 
 

 
.navbar-collapse.in { 
 
overflow: inherit !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script> 
 
     $(document).ready(function() { 
 
      $('#nav-menu').on('show.bs.collapse', function() { 
 
       $('.nav-pills').addClass('nav-stacked'); 
 
      }); 
 
    
 
      $('#nav-menu').on('hide.bs.collapse', function() { 
 
       $('.nav-pills').removeClass('nav-stacked'); 
 
      }); 
 
     }); 
 
    </script> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-menu"> 
 
       <span class="sr-only">Toggle menu</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
    
 
     <div class="collapse navbar-collapse" id="nav-menu"> 
 
      <ul class="nav nav-pills"> 
 
       <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1 <b class="caret"></b></a> 
 
        <ul class="dropdown-menu multi-level"> 
 
         <li><a href="#">Action</a></li> 
 
         <li><a href="#">Another action</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Link 2</a></li> 
 
       <li><a href="#">Link 3</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>

Answer 2

如果我清楚地瞭解你，你所要做的，只是添加navbar-nav類爲主要ul：

<ul class="nav navbar-nav nav-pills"> 

jsfiddle-example