css - 在 Rails 应用程序中单击 `x` 时 Bootstrap 警报不会解除

标签 css ruby-on-rails twitter-bootstrap

点击 x 时通知不会消失。

我认为没有缺少任何必需的 css 类,所以我不确定为什么这不起作用。

在点击x之前:

enter image description here

点击x后:

enter image description here

application.html.erb

<html>
  <body>
    ...
    <% if flash[:notice] %>
        <div class="alert alert-success alert-dismissible fade out in">
          <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
          </button>
          <%= flash[:notice] %>
        </div>
    <% elsif flash[:error] %>
        <div class="alert alert-danger alert-dismissible fade out in">
          <button class="close" data-dismiss="alert">&times;</button>
          <% flash[:error].each do |msg| %>
              <li>
                <%= msg %>
              </li>
          <% end %>
        </div>
    <% elsif flash[:alert] %>
        <div class="alert alert-warning alert-dismissible fade out in">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <%= flash[:alert] %>
        </div>
    <% end %>
  </body>
</html>

Gemfile.rb

gem 'bootstrap-sass'

application.scss

@import 'bootstrap-sprockets';
@import 'bootstrap';

还有什么可以推荐我尝试的吗?

最佳答案

解决方案。

//= require bootstrap-sprockets 添加到 application.js。

我不知道除了 @import 'bootstrap-sprockets';application.scss 中这是必需的

关于css - 在 Rails 应用程序中单击 `x` 时 Bootstrap 警报不会解除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39935581/

相关文章:

ruby-on-rails - 使用嵌套路由与 accepts_nested_attributes_for 有什么区别?

html - 电子邮件 html 框架? (又名电子邮件 Bootstrap )

html - 如何在 Bootstrap 页面上设置一组下拉菜单以使用相同的宽度

jquery - 如何在 tabpane bootstrap 上添加下拉菜单

Avenir 的 iOS Safari 字体字距调整/字母间距问题

html - 如何在 Internet Explorer 中删除 "pictureframe"?

ruby-on-rails - 在 Rails 中通过 simple_form_for 传递数据时获取 NotNullViolation

ruby-on-rails - 检查 url 参数是否存在并在 Rails 中正确渲染

javascript - 具有模糊深色背景的纯 CSS 灯箱

javascript - css - 100% 高度与像素最小高度