我使用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
*/
是否檢查了腳本的順序,如1. jquery.js 2. bootstrap.js,然後是您的自定義腳本。 – 2015-02-08 19:02:25
我查了腳本命令 - 這是我app.js: // =需要的jQuery // =需要jquery_ujs // =需要turbolinks // = require_tree ./clean_canvas – 2015-02-16 19:44:19
控制檯@nicolai沒有錯誤,這裏是截圖:http://i.imgur.com/hcd377t.png?1 - 正如你所看到的,菜單是開放的,而不是像應該那樣捲起來。點擊切換按鈕什麼也不做。 – 2015-02-16 20:23:34