Question

我应该使用什么来设置我的CSS中的flash消息？我似乎无法改变它的造型。这是我的应用程序布局<body>中的相关代码：

    <div class="container">
      <%= render 'layouts/header' %>
      <section class="round">
        <div id= "notice">
          <% flash.each do |key, value| %>
            <div class="flash <%= key %>">
              <%= value %>
            </div>
          <% end %>
        </div>
        <%= yield %>
      </section>
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %>
    </div>

相关的原始CSS就是这样的，但它目前无效。

.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
.success {background:#e6efc2;color:#264409;border-color:#c6d880;}

Answer 1

为父div添加一条带有id notice的规则：

#notice {
  css_formatting_here
}

或者为子div添加规则：

.flash {
  css_formatting_here
}

错误容器的子div具有由空格分隔的多个类。 flash就是其中之一。因此，您可以为该类添加CSS规则，它将起作用。

在这里查看更多此类示例：Hidden features of CSS

Answer 2

看起来CSS调用了类.notice，但div却改为使用ID。

修改

CSS没有响应闪存或＆lt;％= key％＆gt;课程，但它是回应通知ID。不幸的是，如果我的风格注意ID，一些样式出现应该取决于是否存在是一个flash消息。我怎么能够解决这个问题

您可以在div周围添加条件测试：

<% unless flash.empty? %>
  <div id="notice">
    <% flash.each do |key, value| %>
      <div class="flash <%= key %>">
        <%= value %>
      </div>
    <% end %>
  </div>
<% end %>

Answer 3

在你的css文件中输入：

.alert-success {
    dosomestyling;
}

.alert-danger {
    dosomestyling;
}

CSS样式的flash消息

3 个答案: