我有一个简单的 Controller ，用于检查 ActiveModel 的有效性。如果模型有效，则会显示:成功闪现消息。如果不是，则会显示错误闪烁消息。成功闪现消息正确显示(绿色字体和背景)。错误消息显示不正确(红底字体不是红色)。我注意到这同样适用于 :notice 标志。当我将 :error 标志更改为 :warning 时，它会正确显示(黄色背景上的黄色字体)。我想这是某种奇怪的 css 问题，但我不知道如何调试它。有什么建议吗？
这是 Controller 的代码:
class SmsController < ApplicationController
def send_text_message
phone = PhoneNumber.new(pnumber: params[:phone])
puts 'phone = ' + phone.pnumber
if phone.valid?
# code that sends a sms message..
flash[:success] = "Message has been sent!"
redirect_to :back
else
flash[:error] = "This is not a valid mobile number" #phone.errors.full_messages.join(". ")
redirect_to :back
end
end
end
这是 application.html.erb:
<!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">
<meta name="description" content="Appointment Save: ">
<title>Appointment Mate</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<!-- Fixed navbar -->
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
</div>
<%= render 'layouts/footer' %>
<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--%= javascript_include_tag "bootstrap.min" %-->
<!--script src="assets/bootstrap.min.js"></script-->
</body>
</html>
这是 View :
<div class="col-sm-offset-4 col-sm-4">
<br></br>
<br></br>
<br></br>
<%= bootstrap_form_tag url: '/sms/send' do |f| %>
<%= f.telephone_field :phone, label: "Enter a valid UK mobile phone number"%>
<%= f.submit "Send a reminder", class: "btn-custom-lighten btn-lg" %>
<% end %>
</div>
这是 :success flash 的屏幕截图:
这是 :error flash 的屏幕截图:
如您所见，错误提示以纯字体显示，没有背景。当 Controller 中的标志更改为 :warning 时，字体和背景设置正确。所以只是 :error flash 和 :notice 标志没有正确显示。该怎么办？
最佳答案
TL;DR 对于您的用例，您应该使用 flash[:danger]，而不是 flash[:error]。
我可以从您的代码中看到您正在使用 Bootstrap，即:
<div class="col-sm-offset-4 col-sm-4">
在 Bootstrap 中，样式化的 Flash 类显示 here :
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
然后在上面的application.html.erb代码中您有:
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
您可以看到，只要您的 flash message_type 与 bootstrap 警报类匹配，上面的代码就会创建一个与 bootstrap 警报类命名相匹配的 div，即 flash[:success], flash[:info], flash[:warning], or flash[:danger]
或者，您可以修改您的 <% flash.each %>代码在 application.html.erb 中，但是那会很臭。
关于twitter-bootstrap - Rails 错误并注意到 Flash 未通过 css 样式正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26439833/