引导响应导航栏不切换

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，背景.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

我不知道红宝石是什么，但谈论的引导，我看你错过了

data-toggle必须写在一个短语用连字符，如：

data-toggle="collapse" 

或者，它可能：

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

Answer 3

我相信你遇到的响应错误是由于在JS之前没有加载CSS;

这里是我遇到

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

这就是为什么你的菜单没有崩溃

一般来说，你应该能够在的toogle。在

Answer 4

好，我已经缩小这一类中的一些错误一些问题希望让你走上正确的道路。首先我注意到你的菜单有这个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类。希望有所帮助。