jquery - Rails 5 Bootstrap 崩溃不起作用

Question

Railsnoob 在这里。 Bootstrap 崩溃在我的应用程序中无法正常工作。我在一个新创建的 Rails 应用程序中尝试了它，但它也不起作用:

我的 Gemfile 看起来像这样:

source 'https://rubygems.org'

gem 'rails'
gem 'bootstrap-sass'
gem 'puma'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'

group :development, :test do
  gem 'sqlite3'
  gem 'byebug'
end

group :development do
  gem 'web-console'
  gem 'listen'
  gem 'spring'
  gem 'spring-watcher-listen'
end

group :test do
  gem 'rails-controller-testing'
  gem 'minitest-reporters'
  gem 'guard'
  gem 'guard-minitest'
end

group :production do
  gem 'pg'
end

app/assets/stylesheets/custom.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

app/views/pages/home.html.erb它包含 Bootstrap 崩溃文档的第一个示例:

<h1>Pages#home</h1>
<p>Find me in app/views/pages/home.html.erb</p>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

我只是想不通为什么它不起作用。我错过了一个 gem 吗？

编辑:找到解决方案，感谢 Ishwar Deoolkar :)

我在头部添加了以下行:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

主体末尾的这一行:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Have you included bootstrap.js and jquery.js in your project folder

Bootstrap Js:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js “Jquery JS:https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js "

Same problem was getting in my code, the accordion was not working due to bootstrap. But after including the above link in my project folder it's working for me. try this out