當導航欄被摺疊時，如何使Bootstrap 3導航欄從下拉菜單更改爲摺疊？

我正在建立一個層次分明的導航頁面，老闆希望整個導航路徑可以從每個頁面訪問，無論是在工作站還是移動設備上查看。我想出瞭如何構建適用於每種設備類型的菜單，但我無法弄清楚如何動態切換它們。當導航欄被摺疊時，如何使Bootstrap 3導航欄從下拉菜單更改爲摺疊？

我試圖找出如何改變這樣的下拉菜單中，

<ul class="nav navbar-nav navbar-center"> 
<li> 
    <a class="dropdown-toggle" data-toggle="dropdown">MainHeader</a> 
    <ul class="dropdown-menu multi-level"> 
    <li class="dropdown-submenu"> 
    <a class="dropdown-toggle" data-toggle="dropdown">SubHeader</a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">ListItem</a></li>

到這樣的崩潰菜單，

<ul class="nav navbar-nav navbar-center"> 
<div class="panel-group"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
    <a data-toggle="collapse" href="#collapse1">MainHeader</a> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
    <ul class="list-group"> 
    <li class="list-group-item"> 
     <div class="panel-heading"> 
     <a data-toggle="collapse" href="#collapse1a">SubHeader</a> 
     </div> 
     <div id="collapse1a" class="panel-collapse collapse"> 
     <ul class="list-group"> 
     <li class="list-group-item"><a href="#">ListItem</a></li>

每當引導導航欄已展開。

p.s.這是我關於Stack Overflow的第一個問題，我對CSS和Bootstrap都是新手，所以我確信爲了清晰起見，我必須編輯這個問題。對於我造成的任何困惑，我提前致歉。

來源

2017-03-02 John Chidester

如果你創建了CodePen演示這將有助於:) –

它可能不是最好的解決方案，但我發現CSS媒體查詢將允許我觸發我想要在與引導程序用於觸發菜單摺疊相同的視口寬度的行爲。

@media (min-width: 768px) { 
    #navbar-menu-collapse { 
     display: none; 
    } 
} 

@media (max-width: 767px) { 
    #navbar-menu-dropdown { 
     display: none; 
    } 
}

我所做的行爲我想要的方式codepen的例子，但如果有人知道一個更好的解決方案，我仍然會非常有興趣！

http://codepen.io/LordGriffon/pen/peyRjZ

來源

2017-03-02 21:07:47

當導航欄被摺疊時，如何使Bootstrap 3導航欄從下拉菜單更改爲摺疊？

回答

相關問題