Question

我正在尝试在我的Rails应用程序中使用Twitter Bootstrap的手风琴功能。但是，折叠会导致重叠的div，非隐藏部分等。我已经尝试安装过渡插件，或者明确地将其包含在清单中，但我似乎无法正确或查找Rails 4，Bootstrap 3和bootstra-sass gem最新的说明。

如何在我的环境下使用手风琴功能？

的application.js

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

的Gemfile

#Assets
gem 'jquery-rails'
gem 'jquery-turbolinks'
gem 'purecss-rails'
gem 'sass-rails', '~> 4.0.0'
gem 'coffee-rails', '~> 4.0.0'
gem "paperclip", "3.5.4"
gem 'normalize-rails'
gem 'bootstrap-sass'
...

来自引导网站的简单手风琴示例我试图启动并运行

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    simple collapsible
</button>

<div id="demo" class="collapse in">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth ne</div>

提前致谢。

Answer 1

我猜你没有提到你没有在样式表/应用程序文件中添加对Bootstrap样式表的引用。

将app / assets / stylesheets / application.css转换为application.css.scss（如果不是这样的话）。
添加第@import 'bootstrap';行

在那之后，你应该很好。 Bootstrap通过添加和删除具有CSS过渡的样式来使手风琴工作，所以如果你没有样式，那么大多数Bootstrap东西都不会起作用。

Rails 4，Bootstrap 3：手风琴无法正常运行

1 个答案: