2014-03-05 27 views
0

我有一个导轨应用程序3,并且菜单不崩溃。另外,当我调整大小时,三个横条显示为折叠菜单,但正常的菜单项仍然只是在旁边挤在一起。这是哈姆谢谢提前。bootstrap 3可折叠不工作

%nav.navbar.navbar-inverse{role: 'navigation' } 
    %div.container-fluid 
     %div.navbar-header 
     %button.navbar-toggle{type: 'button', 'data-toggle' => 'collapse', id: 'menu-toggler', 'data-target' => '.navbar-collapse'} 
      %span.icon-bar 
      %span.icon-bar 
      %span.icon-bar 
     = link_to (image_tag 'logo.png', class: 'logo'), root_path, class: 'navbar-brand', 'data-no-turbolink' => true 
     %div.collapse.navbar-collapse 
     %ul.nav.navbar-nav.navbar-right 
      %li.active= link_to '<i class="icon-dashboard"></i> Dashboard'.html_safe, root_path, 'data-no-turbolink' => true 
      %li= link_to '<i class="icon-signout"></i> Logout'.html_safe, destroy_user_session_path, method: :delete 
      %li= link_to '<i class="icon-envelope"></i> Contact Us'.html_safe, new_contact_request_path 
      %li.dropdown 
      %a.dropdown-toggle{href: '#', 'data-toggle' => 'dropdown'} 
       %i.icon-gears 
       Profile 
       %b.caret 
      %ul.dropdown-menu 
       %li= link_to 'Manage email addresses', emails_path 
       %li= link_to 'Edit Account', edit_user_registration_path 
       %li= link_to 'Setup Wizard', setup_wizard_home_index_path 
       %li= link_to 'Cancel Account', cancel_account_home_index_path 

回答

0

通过bootstrap文档查看后,我结束了这样做。让下拉式切换开始工作。仍然不确定为什么一些菜单将保持在一定的大小,下拉选项将显示在一边。

$('#nav-toggle').click(function(){ 
    $('.collapse').collapse({ toggle: false }) 
}); 
0

您是否将//= require bootstrap添加到您的JavaScript清单中?

+0

是的所有必要的CSS和JS都是预设的。 – amedeiros