Rails 4 x Bootstrap 3:可关闭的警报不起作用

Rails 4 x Bootstrap 3: Dismissible alerts not working

在我的 Rails 4 应用程序中,我使用 Bootstrap 3.

特别是,我使用 Bootstrap 来显示和设置 flash 消息的样式。

这是我的 application.html.erb 布局文件中的内容:

<div class="flash">

    <% flash.each do |key, value| %>
      <div class="alert alert-<%= key %> alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <%= value %>
      </div>
    <% end %>

</div>

由于 assets/javascriptcustom.js 文件中的以下 JS 代码,Flash 消息确实按预期出现,并在 2 秒后消失:

$('document').ready(function() {
  setTimeout(function() {
    $('.flash').slideUp();
  }, 2000);
});

唯一的问题是,我不知道如何获得一个 "x" 按钮以允许用户在看到即闪消息后将其隐藏。

Bootstrap documentation 说:

Requires JavaScript alert plugin For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.

我跟着 link 到达了 there 但不明白我们在谈论哪个插件。

这是我application.js的内容:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require moment
//= require bootstrap-datetimepicker
//= require bootstrap/dropdown
//= require bootstrap/modal
//= require bootstrap
//= require turbolinks
//= require_tree .

我是不是漏掉了什么?

尝试将 //= require bootstrap-sprockets 添加到您的 application.js 文件

...
//= require bootstrap-sprockets
//= require_tree .

bootstrap-sprockets 是 bootstrap JavaScript 支持。