Bootstrap 响应式导航栏不切换

Question

我正在将 twitter 引导程序用于 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
 */

Answer 1

问题代码在您在引导之前加载的 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文件也有问题。

Answer 2

好的，我已经缩小了一些问题的范围，希望能让您走上正确的道路。首先我注意到你的菜单有这个 CSS 似乎会导致很多问题。

.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

我会删除所有这些。当像 OOTB Bootstrap 一样选择按钮时，您是否尝试传递 display: hide/block？

然后您需要将此属性添加到您的 CSS：

.navbar .navbar-collapse.in {
    display: block;
}

你应该把!important从这个类中去掉，让它看起来像这样。

.collapse.in {
    display: block;
}

因此，当您加载页面时，菜单应该消失了，当您按下按钮菜单按钮时，它应该正确加载菜单。我注意到的一件事是您的菜单在第二次单击时不会删除 .in 类。希望对您有所帮助。

Answer 3

我不知道 ruby​​ 是什么，但谈论引导程序，我看到你错过了

data-toggle必须用连字符写成一个短语，像这样：

data-toggle="collapse"

或者，它可能：

{ type: 'button', class:"navbar-toggle", 
data-toggle: "collapse", data-target: "navbar-ex1-collapse" }

Answer 4

我认为您遇到的响应错误是由于未在 JS 之前加载 CSS；

这是我遇到的一些错误

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

这就是你的菜单没有折叠的原因

一般你应该可以在 .in 中转换这个类