Rails 4，Bootstrap 3：Accordion無法正常工作

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

我猜測你沒有提及你的樣式表/應用程序文件中引用樣式表的引用。

1. 將應用程序/ assets/stylesheets/application.css轉換爲application.css.scss（如果它不是那樣的話）。

2. 添加行@import 'bootstrap';

之後，你應該不錯。 Bootstrap通過添加和刪除具有CSS轉換的樣式來使手風琴起作用，因此如果您沒有樣式，那麼大多數Bootstrap的東西都不起作用。