Bootstrap 3下拉菜单拒绝在rails 4中工作答案

【问题标题】：Bootstrap 3 dropdown refuses to work in rails 4Bootstrap 3下拉菜单拒绝在rails 4中工作
【发布时间】：2014-03-13 07:15:14
【问题描述】：

我在 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

这是我的视图代码

<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>

我不知道出了什么问题？有什么线索吗？

【问题讨论】：

你应该显示你的视图代码

标签： css ruby-on-rails ruby twitter-bootstrap

【解决方案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-sass-extras

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

【讨论】：

完美，我只添加了“bootstrap-sass-extras” gem 和 //= 需要 bootstrap 并且它解决了问题，其他的需要吗？我认为只有这条线它可以启用所有组件.....
我只是尝试在不使用该行的情况下添加轮播 //= require bootstrap/carousel 并且效果很好.....所以我猜你只需要 //= require bootstrap

【解决方案2】：

我正在使用引导主题。我在 vendor/assets/stylesheets/bootstrap.min.css 中有它们在 application.js 添加以下内容。只需获取 bootstrap.js 的副本并将其放在 assets/javascripts 文件夹中

//= require bootstrap

在 application.css 中确保你有

*= require "bootstrap.min.css"

【讨论】：