Меню Bootstrap не рушится правильно

Question

Мы создаем веб-сайт с использованием бутстрапа и с небольшим количеством проблем с меню.

Если вы посмотрите на http://www.tempsite.co.uk/bstrp/ - верхнее меню выглядит нормально, и оно также хорошо складывается при просмотре на мобильном устройстве.

Однако, когда я пытаюсь уменьшить размер моего браузера, чтобы увидеть точки разрыва, есть точка, в которой меню не рушится правильно.

Это между средним и мелкой.

Любые идеи? Благодаря!

Answer 1

вы можете сделать это, изменив точку останова для системы сетки или переопределения CSS, так что Navbar будет свернуто для средних устройств (таблетки), используя следующий код:

@media (max-width: 991px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.6px -16px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 12px; 
     padding-bottom: 12px; 
    } 
}