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

Question

我正在为 Rails 元素使用 twitter bootstrap，并且响应式导航栏工作得不太正常。缩小屏幕尺寸后，导航栏会显示菜单切换按钮，其下方的导航栏选项保持打开状态，然后在进一步缩小后，最终会按应有的方式隐藏导航栏选项。但是，无论哪种情况，单击导航栏菜单切换按钮都不会执行任何操作。我已检查以确保 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

应用程序.css

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

Answer 1

问题代码位于 Bootstrap 之前加载的 css 中:about.css、background.css 等。此类之一不允许打开菜单。 - 由于CSS被缩小了，我不知道问题出在哪里，但我猜它在bootstrap-overrides.css中。错误的 css 如下:如果您将其删除，导航栏应该开始工作:

@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 文件也有问题。