私はナビゲーションバーとメニューを設定して遊んできましたが、ブラウザウィンドウのサイズを変更するとハンバーガーメニューが表示されないようです。ブートストラップ3で折りたたみ可能なハンバーガーメニューを定義する方法は?
私はデータの切り替えを定義し、メインのナビゲーションバーにターゲットを設定したところで、ブラウザのサイズを変更するときに機能しませんでした。
質問:hambugerメニューは、このマークアップで再サイズにトリガされていない理由
、誰もが知っていますか?
<header>
<div class="container-fluid">
//Defined the toggle here, pointing it's data-target to the navBarCollapsable main nav bar.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBarCollapsable">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navBarCollapsable">
<nav>
<ul id="menu" class="nav navbar-nav">
<li><a>Selection:</a></li>
<li>
<a>Assets <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox" /> Option 1</a>
</li>
<li>
<a href="#" class="small" data-value="option2" tabindex="-1">
<input type="checkbox" /> Option 2</a>
</li>
<li>
<a href="#" class="small" data-value="option3" tabindex="-1">
<input type="checkbox" /> Option 3</a>
</li>
<li>
<a href="#" class="small" data-value="option4" tabindex="-1">
<input type="checkbox" /> Option 4</a>
</li>
<li>
<a href="#" class="small" data-value="option5" tabindex="-1">
<input type="checkbox" /> Option 5</a>
</li>
<li>
<a href="#" class="small" data-value="option6" tabindex="-1">
<input type="checkbox" /> Option 6</a>
</li>
</ul>
</li>
<li>
<div class="horizontalgap" style="width:10px"></div>
</li>
<li><a>Profile:</a></li>
<li>
<a>Assets <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
<a href="#" class="small" data-value="option1" tabindex="-1">
<input type="checkbox" /> Option 1</a>
</li>
<li>
<a href="#" class="small" data-value="option2" tabindex="-1">
<input type="checkbox" /> Option 2</a>
</li>
<li>
<a href="#" class="small" data-value="option3" tabindex="-1">
<input type="checkbox" /> Option 3</a>
</li>
<li>
<a href="#" class="small" data-value="option4" tabindex="-1">
<input type="checkbox" /> Option 4</a>
</li>
<li>
<a href="#" class="small" data-value="option5" tabindex="-1">
<input type="checkbox" /> Option 5</a>
</li>
<li>
<a href="#" class="small" data-value="option6" tabindex="-1">
<input type="checkbox" /> Option 6</a>
</li>
</ul>
</li>
<li>
<div class="horizontalgap-md"></div>
</li>
</ul>
</nav>
</div>
</div>
</header>
あなたはbootstrap.cssとbootstrap.jsを貼り付けましたか? –
はいスタイルシートとjsの両方の参照があります。私のブートストラップはレンダリングされていますが、ハンバーガーのデータシートはブラウザのサイズを小さくしても小さく表示されることはありません。 –
コードをスニペットまたはjsfiddleに入れてください。 –