Консолидация нескольких меню Bootstrap 3 navbar при падении

jquery css twitter-bootstrap responsive-design twitter-bootstrap-3

8691 просмотра

1 ответ

2475 Репутация автора

Мы переместили наш административный интерфейс для большой CMS в Bootstrap (3.x), чтобы обеспечить лучшую поддержку на всех устройствах. В интерфейсе рабочего стола есть несколько меню для разных целей.

Мне удалось свернуть единственное меню в интерфейсе xs, однако мне трудно не понять, как свернуть остальные в то же мобильное меню или в другую кнопку меню на той же панели навигации, или если есть решение "С", о котором я даже не знаю.

Это вообще возможно?

Автор: oucil Источник Размещён: 20.07.2014 01:28

Ответы (1)


5 плюса

45136 Репутация автора

Атрибут data-target принимает CSS-селектор для применения свертывания. Этот селектор CSS также может быть классом (поэтому не обязательно должен быть уникальным) и может применяться на нескольких панелях навигации.

Поэтому создайте несколько панелей навигации, каждый из которых будет содержать содержимое <div class="collapse navbar-collapse">.

На одной из этих навигационных панелей должна быть кнопка мобильного переключателя data-target=".navbar-collapse":

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

демо: http://www.bootply.com/BaiuoZqIrk

Также см:

Автор: Bass Jobsen Размещён: 11.11.2014 08:29
Вопросы из категории :
32x32