移動輸入框的簡單表單錯誤消息

Question

我遇到了使用simple_form gem在我的「註冊」表單上格式化錯誤消息的問題。 This is what my registration form looks like when handling errors.

我希望錯誤消息出現在輸入框下方，並且我不希望輸入框的對齊方式在提交錯誤輸入時發生更改。

 <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> 
     <%= f.error_notification input_html: { class: 'error' } %> 
     <div class="panel-body"> 
      <%= f.input :email, required: true, autofocus: true, label: false, placeholder: 'Email', input_html: { class: 'input-lg' } %> 
      <%= f.input :user_name, required: true, label: false, placeholder: 'User Name', input_html: { class: 'input-lg' } %> 
      <%= f.input :password, required: true, label: false, placeholder: 'Password', input_html: { class: 'input-lg' } %> 
      <%= f.input :password_confirmation, required: true, label: false, placeholder: 'Confirm Password', input_html: { class: 'input-lg' } %> 

有什麼我可以在我的CSS調整，使錯誤信息出現在下面的輸入框中中心：如看到下面的輸入和錯誤消息的結構？我嘗試過利用邊緣，但是當我這樣做時，輸入框會改變對齊方式。

Answer 1

找到了解決方案，它非常簡單。剛剛不得不編輯CSS如下：

.error { 
    display: block; 
    text-align: center; 
}