无法使用带有 Rails 4 的 Bootstrap 关闭 flash[:notice] 消息答案

【问题标题】：Unable to close flash[:notice] message using Bootstrap with Rails 4无法使用带有 Rails 4 的 Bootstrap 关闭 flash[:notice] 消息
【发布时间】：2014-12-22 03:34:44
【问题描述】：

将 Bootstrap 3 与 Rails 4 应用程序一起使用，我在 application.html.erbfile 中设置了 flash[:notice]、flash[:error]、flash[:alert]，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head> 
<body>
  <div class='container'>
    <ul class='nav nav-tabs'>
      <li><%= link_to 'Wikis', wikis_path %></li>
      <div class="pull-right user-info">
      <% if user_signed_in? %>
        Hello, <%= link_to current_user.name, edit_user_registration_path %> |
        <%= link_to 'Sign Out', destroy_user_session_path, method: :delete %>
     <% else %>
        <%= link_to 'Sign Up', new_user_registration_path %> or
        <%= link_to 'Sign In', user_session_path %>
     <% end %>
      </div>
   </ul>
 </div>

 <% if flash[:notice] %>
 <div class="alert alert-success">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <%= flash[:notice] %>
 </div>
 <% elsif flash[:error] %>
 <div class="alert alert-danger">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <%= flash[:error] %>
 </div>
 <% elsif flash[:alert] %>
 <div class="alert alert-warning">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <%= flash[:alert] %>
 </div>
 <% end %>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="js/bootstsrap.min.js"></script>

 <%= yield %>

</body>
</html>

当我在开发和生产应用程序中收到通知、错误或警报时，我无法将其关闭。我试过移动两个scrpt src，但似乎没有任何影响。

【问题讨论】：

您的警报缺少alert-dismissible 类。
文件名有错别字js/bootstsrap.min.js
@cvrebert 我有class="close" data-dismiss="alert"，我将class="close" 换成了class='alert-dismissable，虽然它改变了关闭对象的样式，但我仍然无法真正关闭警报。
@anpsmn 好地方。我更新了这个，但它似乎没有影响。仍然无法关闭警报。
alert-dismissible 与 alert 类一起使用，而不是在关闭按钮上。

标签： javascript twitter-bootstrap ruby-on-rails-4

【解决方案1】：

更新：我可以通过将//= require bootstrap 添加到我的application.js 文件来解决此问题：

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

【讨论】：

【解决方案2】：

在 Bootstrap 4 中，您不需要全部 Bootstrap。如果这就是您需要的所有 JS，只需执行以下操作：

//= require bootstrap/alert
//= require bootstrap/util

【讨论】：