Rails5 Bootstrap崩溃不起作用

Posted 2023-05-08

【中文标题】Rails5 Bootstrap崩溃不起作用

【英文标题】：Rails5 Bootstrap collapse not working

【发布时间】：2018-04-09 00:49:20

【问题描述】：

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 它包含引导折叠文档的第一个示例：

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

我只是不知道为什么它不起作用。我错过了一颗宝石吗？

编辑：找到解决方案，感谢 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>

【参考方案1】：

您是否在项目文件夹中包含了 bootstrap.js 和 jquery.js

引导 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"

我的代码中出现了同样的问题，手风琴由于引导程序而无法工作。但是在我的项目文件夹中包含上述链接后，它对我有用。试试这个

【讨论】：

谢谢，这就是解决方案。包含引导程序就足够了；）