Ruby on rails 使用Rails/Desive/boostrap/simple_表单使帮助消息显示在表单字段下方

在上，当您单击表单（：focus）时，下面会显示一条“帮助消息”。例如，“您的电子邮件地址是什么？”出现在电子邮件下方

我试图分析他们的css，但我没能在我的代码中应用这样的东西。 我想我遗漏了一些重要的东西，比如当用户在字段内单击时，如何告诉程序我希望它出现

这是我的密码

Rails视图：

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => 'form-vertical' }) do |f| %>
  <fieldset>
    <%= f.error_notification %>
    <%= display_base_errors resource %>
    <%= f.input :email,                                 :required => true, placeholder: t("devise.registrations.sign_up_page.whats_your_email_address") %>
    <div class="field-help"> What's your email address? </div>
    <%= f.input :password,                          :required => true %>
    <%= f.input :password_confirmation, :required => true %>

    <div class="fullsized"><%= f.button     :submit, t("devise.registrations.sign_up_page.sign_up"), :class => 'btn-primary' %>
    </div>
  </fieldset>
<% end %>

---

}您应该使用CSS3淡入/淡出功能。尝试添加此样式：

fieldset input:focus+.field-help {
    opacity:1;
    top: 0;
    max-height: 20px;
    margin-bottom:10px;
}

演示：

fieldset input:focus+.field-help {
    opacity:1;
    top: 0;
    max-height: 20px;
    margin-bottom:10px;
}