2015-10-24 4 views
4

Я пытаюсь найти пример загрузочной навигационной панели bootstrap 4, которая сворачивается к кнопке гамбургера только по ширине xs, но полностью видима при шире.Bootstrap 4 отзывчивый navbar, который разрушается при ширине xs?

Существует загрузочный 3 example, который работает только, но ничего для 4, что я нашел.

На странице примеров загрузки 5 навигация отображается версия collapsed content, но она рушится на всех ширинах.

И под ним намекает, как заставить его работать с использованием .navbar-toggler, et. и др.

Для более сложных шаблонов навигационных панелей, подобных тем, которые используются в Bootstrap v3, используйте классы .navbar-toggleable- * в сочетании с .navbar-toggler. Эти классы переопределяют наши отзывчивые утилиты, чтобы показывать навигацию только тогда, когда контент должен отображаться.

У меня есть минимальное знание бутстрапа, поэтому любое решение, которое я не хочу бороться с каркасом, если есть уже санкционированный способ сделать это.

Edit:

На самом деле, Отзывчивый пример Navbar ниже Collapsible content в начальной загрузки 4 документации делает именно то, что я искал с помощью Navbar-переключаемой-хз класса. Я не видел этого раньше, потому что я не сделал окно достаточно узким.

+0

Вы уже ответили на свой вопрос. Используйте '.navbar-toggleable-xs' –

+0

@ManojKumar Так много классов, чтобы учиться. Благодаря! – ourmandave

+0

@ourmandave, пожалуйста, добавьте свое редактирование в качестве ответа и примите его, поэтому этот вопрос может быть закрыт –

ответ

8

На самом деле, пример адаптивного Navbar ниже Collapsible content в документации bootstrap 4 делает именно то, что я искал, используя класс navbar-toggleable-xs. Я не видел этого раньше, потому что я не сделал окно достаточно узким.

В Bootstrap 4 alpha 6, теперь это просто navbar-toggleable без -xs.

EDIT: Ссылка документация сейчас здесь: http://v4-alpha.getbootstrap.com/components/navbar/#nav

+1

, потому что -xs больше не существует в сетке! – Pascal

 Смежные вопросы

  • Нет связанных вопросов^_^