Question

我使用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
 */

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文件的问题。

Answer 2

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

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

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

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

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

你应该从这个课程中取出!important，这样看起来就像这样。

.collapse.in {
    display: block;
}

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

Answer 3

我不知道ruby是什么，但谈论bootstrap，我看你错过了

data-toggle必须用一个带有hypen的短语写成，如下所示：

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

中删除这个课程

Bootstrap响应式导航栏无法切换

4 个答案: