什么可能导致Bootstrap模式不留在屏幕上？

我在我的应用程序中使用Bootstrap模式，我正在尝试执行股票Bootstrap模式作为概念certificate（即从模态工作的基线开始，然后从那里构建）。

在我的_notifications.html.erb我有这个：

  Launch demo modal   
 
 
 
 ×Close 
Modal title
 
 
 ... 
 
 Close Save changes 
 
 
  

问题是当我点击它时，模态出现的时间为1/10秒，然后消失。

这就是我的application.js样子：

 //= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require best_in_place //= require main.js //= require bootstrap //= require bootstrap-sprockets //= require jquery-ui/datepicker //= require best_in_place.jquery-ui //= require jquery.purr //= require best_in_place.purr //= require bootstrap.file-input //= require chosen.jquery //= require spin.min //= require ladda.min //= require masonry.js //= require intro.js //= require pnotify //= require turbolinks $(document).on("ready page:load", function(){ $("input.datepicker").datepicker(); /* Activating Best In Place && Include Success Highlighting & Bounce for comments & videos */ $(".best_in_place").best_in_place().bind("ajax:success", function () {$(this).closest('p, h5').effect('highlight').effect("bounce", { times:3 }, { duration:400}).dequeue(); }); $('.dropdown-toggle').dropdown(); $('#unread-notification').click(function(){ var url = $(this).data('read-url'); $.ajax({ type: "PUT", url: url }); }); }); 

我已经在我的应用程序中的每个其他文件中注释掉了所有JS，但是仍然没有解决问题。

什么可能导致这种奇怪的行为？

编辑1

这些是我的Gemfile中的适当元素：

 gem 'coffee-rails', '~> 4.0.1' gem 'jquery-rails', '~> 3.1.0' gem 'turbolinks' gem 'bootstrap-sass', '~> 3.2.0.0' gem 'sass-rails', '>= 3.2' gem 'jquery-turbolinks' 

为了进一步排除故障，当我从模态类中删除类fade ，即我的开始div看起来像这样：

模态根本不会发射。

编辑2

对于它的价值，当我从JS控制台执行/触发模态时，我可以看到模态…有点。 如同，模态显示，但它似乎在灰色叠加层后面，您可以在下面的屏幕截图中看到。

编辑3

这是我的bootstrap_and_overrides.css.scss声明：

 @import "bootstrap-sprockets"; @import "bootstrap"; @import "font-awesome"; 

Answer 1

在调查之后，我检查了你可能遇到的任何问题。 我相信你的引导程序在我通过控制台检查时加载了两次，并且每个复制的行总是呈现两个匹配。

另外根据bootstrap-sass文档

 // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables" 

Answer 2

正如arinh所说，问题是Bootstrap被加载了两次。

罪魁祸首是我的application.js ：

 //= require bootstrap //= require bootstrap-sprockets 

一旦我删除了顶行，即刚刚将我的application.js转换为：

 //= require bootstrap-sprockets 

它工作得很好。