бутстраповские нав не рушится на маленьких экранах

Question

Не уверен, что если я даже делать это право

#navigation.navbar.navbar-default.navbar-fixed-top 
.container 
    .navbar-header 
     %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#navbar-1", "data-toggle" => "collapse", :type => "button"} 
      %span.sr-only Toggle 
      %span.icon-bar 
      %span.icon-bar 
      %span.icon-bar 
     %b= link_to "TITLE", root_path, class: 'navbar-brand' 
    #full-screen-nav 
     .navbar-collapse.collapse#navbar-1 
      %ul.nav.navbar-nav 
       %li Item 1... 

Прямо сейчас, когда ширина размер экрана меньше, чем 640, все элементы (ITEM1, item2, ...) просто исчезают, оставляя на панели навигации только TITLE.

Я думал, что navbar-collapse.collapse - это, чтобы свернуть этот элемент в какую-то выпадающую? или я неправильно понял, что этот класс должен делать?

Как исправить это, чтобы элементы появлялись на меньших экранах?

Answer 1

Я думаю, что вы отсутствуете button.navbar-toggle.collapsed на ваш .navbar-header

Этой кнопки будет показать/скрыть свое меню.

Проверьте пример bootrap сделал для навигационной панели here

Ваш код должен выглядеть примерно так jsfiddle