Вопрос по jquery, twitter-bootstrap-3, responsive-design, twitter-bootstrap, css – Консолидация нескольких меню Bootstrap 3 navbar при падении

4

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

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

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

Я также искал «хороший» способ сделать это. В прошлом я создал 2 меню для рабочего стола, а затем небольшое мобильное меню, видимое на небольших устройствах (это совершенно другое меню, но объединение обоих), но я знаю, что это не самый эффективный способ сделать что-то, хотя , Stuart

Ваш Ответ

1   ответ
5

Атрибут 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

Также см:

Несколько навигационных панелей на одной странице с помощью Twitter's Bootstrap 3Bootstrap 3 нескольких меню сворачиваются в одно для мобильных

Похожие вопросы