Navbarが折り​​たたまれているときに、どのようにしてBootstrap 3 navbarをdropdownsからcollapsesに変更できますか？

Question

私は、階層化されたナビゲーションを備えたページを構築しています。ボスは、ワークステーションやモバイルデバイスで表示されている場合でも、すべてのページからナビゲーションパス全体にアクセスできるようにしたいと考えています。私は各デバイスタイプでうまく動作するメニューを構築する方法を考え出しましたが、それらを動的に切り替える方法を理解することはできません。私はこのようなドロップダウンメニューを変更する方法を把握しようとしている

、このような崩壊メニューへ

<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の両方を初めて使っていますので、わかりやすくするためにこの質問を編集する必要があります。私は、私が起こす混乱について事前に謝罪します。

Answer 1

これは最善の解決策ではないかもしれませんが、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