Question

我遵循了One Month Rails教程，在教程的某一点上，我被告知将以下行添加到我的application.html.erb以启用Flash消息

<% flash.each do |name, msg| %>
    <%= content_tag(:div, msg, class: "alert alert-#{name}") %>
<%end%>

这将做什么，它将在登录或注销周围的一些CSS样式后显示消息。

当我按照教程进行操作时，代码运行正常，但是当我尝试启动自己的项目时，它不再具有围绕它的CSS样式。该消息仍会显示，但它只是页面顶部的纯文本。

以下是我的application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>JMO</title>
  <%= 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">
        <% flash.each do |name, msg| %>
                <%= content_tag(:div, msg, class: "alert alert-#{name}") %>
        <%end%>

        <%= render "layouts/header" %>

        <div class = "text-center">
            <%= yield %>
        </div>

        <%= render "layouts/footer" %>
    </div>
</body>
</html>

这是从教程（工作版本）中获取的application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Omrails</title>
  <%= 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">
        <!---require for devise setup step 3-->
        <% flash.each do |name, msg| %>
            <%= content_tag(:div, msg, class: "alert alert-#{name}") %>
        <%end%>
        <!---render header partial from layouts/header-->
        <%= render "layouts/header" %>
        <%= yield %>
        <!---render footer partial from layouts/header-->
    </div>
    <%= render "layouts/footer" %>
</body>
</html>

我在这里做错了什么？

编辑：我用工作文件替换了我的非工作文件，看到该消息现在没有样式，所以我认为问题不在我的application.html.erb中。还有什么问题可以解决？我认为这可能是一个设计问题？

Answer 1

要获取应用于HTML元素的样式，必须通过添加自己的样式或使用外部css库在某处定义它们。

据我所知，OneMonthRails教程使用bootstrap-sass gem进行样式设计。

为了在新的Rails应用程序中获得相同的样式，您需要将gem添加到Gemfile

gem 'bootstrap-sass'

运行bundle install以安装gem。

在bootstrap文件中导入app/assets/stylesheets/application.css.scss，在其中添加以下语句：

@import 'bootstrap';

并重新启动服务器。

以下设计安装后闪存通知无法正常工作

1 个答案: