jquery - Bootstrap响应式导航栏不切换

我正在将Twitter Bootstrap用于Rails项目，而响应式导航栏运行不正常。缩小屏幕大小后，导航栏将显示菜单切换按钮，并且导航栏选项在其下方保持打开状态，然后进一步缩小后，最终将导航栏选项隐藏起来。但是，无论哪种情况，单击导航栏菜单切换按钮都不会执行任何操作。我已经检查以确保已加载jQuery，并且正在使用最新版本的Bootstrap。这是我的代码：

.navbar.navbar-inverse.navbar-fixed-top{ role: 'navigation', style: 'background-color:#000066' }
    .container
        .navbar-header
            %button.navbar-toggle.pull-right{ type: 'button', data: { toggle: "collapse", target: ".navbar-ex1-collapse" } }
                %span.sr-only Toggle Navigation
                %span.icon-bar
                %span.icon-bar
                %span.icon-bar
            %a.navbar-brand{ href: root_path }
                %strong
                    L
                    %i.fa.fa-cog{ style: 'font-size:80%;margin:0 -2px;' }
                    gSMART
        .collapse.navbar-collapse.navbar-ex1-collapse{ role: 'navigation' }
            %ul.nav.navbar-nav.navbar-right
                %li
                    %a{ href: root_path, class: set_css_if( path: root_path ) }
                        HOME
                %li
                    %a{ href: about_path, class: set_css_if( path: about_path ) }
                        ABOUT
                %li
                    %a{ href: faq_path, class: set_css_if( path: faq_path ) }
                        FAQs
                %li
                    %a{ href: resources_path, class: set_css_if( path: resources_path ) }
                        MANUALS and RESOURCES
                -if current_user
                    %li
                        %a{ href: logout_path, class: set_css_if( path: logout_path ) }
                            LOGOUT
                -else
                    %li
                        %a{ href: login_path, class: set_css_if( path: login_path ) }
                            LOGIN

为了进一步说明，这是我的布局页面application.js和application.css。

布局：

%html{ lang: :en }
  %head
    %title
      CogSMART
    %meta{ name: "viewport", content: "width=device-width, initial-scale=1.0" }

    = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic'
    = stylesheet_link_tag "//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true

    = javascript_include_tag "application", "data-turbolinks-track" => true

    = csrf_meta_tags

  %body.pull_top
    = render 'partials/navbar'
    #coming_soon
      .head
        .container
          .span12.text
            %h4
              CogSMART stands for:
            %h4
              Cognitive Symptom Management and Rehabilitation Therapy

app.js

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree ./clean_canvas

app.css

/*
 *= require_tree ./clean_canvas_v2
 *= require_self
 */

最佳答案

问题代码在引导之前加载的CSS中：about.css，background.css等。此类之一不允许打开菜单。 -由于css已缩小，因此我不知道问题出在哪，但我想它在bootstrap-overrides.css中。
错误的CSS如下：如果将其删除，则navbar应该开始工作：

@media (max-width: 991px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none
    }

    .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px
    }

    .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
        background-image: none
    }
}

@media (min-width: 992px) {
    .navbar .collapse {
        display: block !important
    }
}

@media (max-width: 991px) {
    .navbar .navbar-header {
        float: none
    }

    .navbar .navbar-toggle {
        display: block
    }

    .navbar .collapse {
        display: none !important
    }

    .navbar .navbar-collapse {
        max-height: 340px;
        overflow-x: visible;
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        -webkit-overflow-scrolling: touch
    }

    .navbar .navbar-collapse.in {
        overflow-y: auto
    }

    .navbar ul.navbar-nav {
        padding: 0px 20px
    }

    .navbar ul.navbar-nav.navbar-right {
        float: left !important
    }

    .navbar ul.navbar-nav > li {
        float: none
    }

    .navbar ul.navbar-nav .open .dropdown-menu > li > a {
        color: #999;
        line-height: 25px;
        font-weight: bold;
        padding: 5px 15px 5px 35px;
        font-size: 15px
    }

    .navbar ul.navbar-nav .open .dropdown-menu > li > a:hover {
        color: #fff;
        background: none
    }
}

你也有js文件的问题。

关于jquery - Bootstrap响应式导航栏不切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28397976/