css - Bootstrap 3 下拉菜单拒绝在 Rails 4 中工作

Question

我在 Rails 4 应用程序中使用 bootstrap-sass 3.1.1 gem。 CSS 工作正常，但我根本无法让下拉菜单出现。我的 application.js 文件是这样的。

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

我还将这一行添加到 config\application.rb

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

我的 gemfile 看起来像这样

source 'https://rubygems.org'
ruby '1.9.3'
#ruby-gemset=railstutorial_rails_4_0

gem 'rails', '4.0.3'
gem 'pg', '0.15.1'
gem 'bootstrap-sass', '3.1.1'

group :development,:test do
  gem 'rspec-rails', '2.13.1'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
end

gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'

group :doc do
  gem 'sdoc', '0.3.20', require: false
end

group :production do
  gem 'rails_12factor', '0.0.2'
end

这是我的 View 代码

<div class="dropdown">
<button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Choose a Specialty
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">General Practioner</a>  </li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dentist</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dermatologist</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Eye Doctor</a></li>
</ul>

我不知道怎么了？有什么线索吗？

Answer 1

为了激活下拉菜单，您应该将其添加到您的 application.js

//= require bootstrap/dropdown

其他js组件也一样。可以看一下here https://github.com/twbs/bootstrap-sass#javascript

这是我完整的application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover
//= require turbolinks
//= require_tree .

为了更好地帮助您进行 Bootstrap ，我还要添加

bootstrap-sass-extras

在你的 gemfile 中 https://github.com/doabit/bootstrap-sass-extras