Question

我最近开始使用ruby on rails编程我一直在使用twitter bootstrap作为CSS框架进行演示项目。我在gem文件中包含了bootstrap-sass并捆绑了，除了下拉菜单和java脚本函数之外，bootstrap的所有部分都工作正常。请建议我在哪里弄错了。这是我的宝石文件：

    source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use sqlite3 as the database for Active Record
group :development do
    gem 'sqlite3'
end
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc
group :production do
gem 'pg'
end
gem 'devise'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
gem 'bootstrap-sass', '~> 3.1.1.1'

这是我的application.js

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

我的application.html.erb文件如下所示

<!DOCTYPE html>
<html>
<head>
<title>Mirror</title>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true   %>
<%= javascript_include_tag 'application' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>

最后，我的application.css.scss看起来就是这样

/*
@import "bootstrap";
* This is a manifest file that'll be compiled into application.css, which will include   all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets,    vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree
*= require_self

我将不胜感激任何建议或提示。谢谢！

Answer 1

将其添加到application.js文件的末尾：

$('.dropdown-toggle').dropdown();

下拉列表现在可以正常工作。

Answer 2

一个不太常见的修复方法是添加jquery-turbolinks gem。

下拉列表不起作用的原因是因为它们被$(document).ready而不是$(document).on('page:change')绑定，这是turbolinks使用的。

jquery-turbolinks gem将使它成为现成的调用也会响应turbolink的页面：更改调用。

第1步： 将gem jquery-turbolinks添加到您的Gemfile中。

第2步： 按以下顺序将其添加到JavaScript清单文件中：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

Badabing！

Answer 3

尝试放

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets

进入你的application.js文件。 Bootstrap-sprockets为您提供了所有bootstrap js文件。有关要求引导程序组件（单独）的更多信息，请参阅bootstrap-sass documentation。

Bootstrap-sass gem无法为下拉菜单加载js

3 个答案: