2016-04-04 5 views
4

Этот вопрос уже задан here, но это не работает из-за Javascript. Таким образом, в предоставленном ответе был изменен только CSS, но не JS, что означает, что содержимое навигационной панели все еще отображается, а toggler - нет. Любое решение?Bootstrap 4 - Изменить точку останова navbar?

Edit:

Мой вопрос заключается в том, чтобы изменить точку останова на панели навигации в Bootstrap 4.xx

+0

Другой вопрос состоял в том, чтобы укладывать элементы вертикально, когда навигация сворачивается, а не точка останова на панели навигации. – ZimSystem

ответ

4

Вы можете изменить NavBar точки останова Bootstrap 4 с использованием navbar-toggleable-* классов. Используйте классы утилиты hidden-*, чтобы показать/скрыть кнопку переключения.

Bootstrap 4 Navbar Breakpoints Demo


Обновление для Bootstrap 4.0.0

Изменение NavBar точки останова проще в Bootstrap 4 с использованием navbar-expand-* классов. Если вы исключаете navbar-expand-*, мобильное меню будет использоваться по ширине all. Ниже приведена демонстрация всех 6 состояний навигационной системы: Bootstrap 4 - Navbar Tiers

+1

Спасибо за ответ, это сработало. Мне пришлось исправить CSS для следующего класса: «.navbar-nav .navbar-toggleable-xs.collapse». – Piet

1

(Bootstrap 4 Beta compliant) Если вы хотите иметь настраиваемые точки останова, вы можете использовать этот фрагмент с моего собственного сайта. Я скопировал одну из определенных контрольных точек и изменил ее в соответствии с моими потребностями. У меня были проблемы с тем, что меню не было встроено в бренд, но я исправил это, переопределив опцию flex-wrap. Чтобы реализовать, просто добавьте в другой файл CSS или встроенный. Код:

@media (max-width:1070px){.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1071px){.navbar-expand-srset{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-srset .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-srset .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-srset .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-srset .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-srset .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-srset .navbar-toggler{display:none}.navbar{flex-wrap:nowrap!important;-ms-flex-wrap:nowrap!important;}} 

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

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