2015-02-08 276 views
1

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

是否檢查了腳本的順序,如1. jquery.js 2. bootstrap.js,然後是您的自定義腳本。 – 2015-02-08 19:02:25

+0

我查了腳本命令 - 這是我app.js: // =需要的jQuery // =需要jquery_ujs // =需要turbolinks // = require_tree ./clean_canvas – 2015-02-16 19:44:19

+0

控制檯@nicolai沒有錯誤,這裏是截圖:http://i.imgur.com/hcd377t.png?1 - 正如你所看到的,菜單是開放的,而不是像應該那樣捲起來。點擊切換按鈕什麼也不做。 – 2015-02-16 20:23:34

回答

2

問題的代碼是在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文件有問題。

0

我不知道紅寶石是什麼,但談論的引導,我看你錯過了

data-toggle必須寫在一個短語用連字符,如:

data-toggle="collapse" 

或者,它可能:

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

使用rails + haml,我不需要爲數據屬性輸出完整的數據切換標籤。數據:{toggle:「崩潰」,目標:「.navbar-ex1-collapse」}正常工作,這是我用過的。 – 2015-02-16 19:49:46

+0

謝謝,我從你的問題中學到新東西。知識就是一切。 – 2015-02-16 23:57:30

0

我相信你遇到的響應錯誤是由於在JS之前沒有加載CSS;

這裏是我遇到

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

這就是爲什麼你的菜單沒有崩潰

一般來說,你應該能夠在的toogle。在

1

好,我已經縮小這一類中的一些錯誤一些問題希望讓你走上正確的道路。首先我注意到你的菜單有這個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類。希望有所幫助。