-1
Я играл с моей навигационной панелью и настройкой меню, но не могу заставить меню гамбургера запускаться, когда меняю размер моего окна браузера.Как определить складное меню гамбургера в Bootstrap 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? –