Bootstrap – изменить панель навигации точки останова?

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

Редактировать:

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


twitter-bootstrap bootstrap-4 breakpoints bootstrap-5 nav
person Piet    schedule 04.04.2016    source источник
comment
Другой вопрос касался укладки элементов по вертикали после схлопывания панели навигации, а не точки останова схлопывания панели навигации.   -  person Zim    schedule 04.04.2016

Ответы (4)


arrow_upward
16
arrow_downward

Загрузка 5.0

Bootstrap 5 по-прежнему использует классы navbar-expand* для определения точки останова сворачивания панели навигации. Теперь есть дополнительный класс navbar-expand-xxl.

Bootstrap 5 – уровни панели навигации

Загрузка 4.0.0

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

См. также: Изменить точку останова сворачивания панели навигации начальной загрузки без использования LESS

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

arrow_upward
7
arrow_downward

введите здесь описание изображения

Bootstrap предоставляет простой способ работы с меню. Вы можете использовать navbar-expand-xl, navbar-expand-lg, navbar-expand-md и т. д. в соответствии с вашими потребностями. Спасибо

person user1744669    schedule 12.04.2018

arrow_upward
1
arrow_downward

(совместимость с Bootstrap 4 Beta). Если вы хотите настроить точки останова, вы можете использовать этот фрагмент с моего собственного сайта. Я скопировал одну из определенных точек останова и изменил ее в соответствии со своими потребностями. У меня были проблемы с тем, что меню не соответствовало бренду, но я исправил это, переопределив параметр 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;}}
person Spotlightsrule    schedule 20.08.2017

arrow_upward
1
arrow_downward

Я переопределяю .navbar-expand-lg в собственном CSS.

Вот пример кода:

    @media (min-width: *desired break point here){
.navbar-expand-lg {
    -ms-flex-flow: row nowrap !important;
    flex-flow: row nowrap !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute !important;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none !important;
  }}
person user10867411    schedule 04.01.2019