simple_form行垂直對齊

Question

我在我的rails 4.2項目中使用了simple_form。在錯誤顯示驗證之後，我在行/字段對齊方面遇到了一些問題。驗證的任何字段都不會與失敗的驗證字段垂直對齊。

 <%= simple_form_for(@creditrequest) do |f| %> 
     <%= f.error_notification %> 
     <br> 
    <div class="form-actions creditrequest_form"> 
     <div class="row row-centered"> 
     <div class="col-sm-2 col-centered"> 
      <%= f.input :account, as: :string, label: "Account #", placeholder: "000-" %> 
     </div> 
     <div class="col-sm-2 col-centered"> 
      <%= f.input :gldsname, label: "GLDS Name", placeholder: "Bob Wehadababyitsaboy" %> 
     </div> 
     <div class="col-sm-2 col-centered"> 
      <%= f.input :contact_no, label: "Contact No", placeholder: "(989) 555-1212" %> 
     </div> 
     </div> 
     <div class="row row-centered"> 
     <div class="col-sm-2 col-centered"> 
      <%= f.input :credit_amount, as: :string, label: "Credit Amount", placeholder: "$", class: "textarea_oneline" %> 
     </div> 
     <div class="col-sm-2 col-centered"> 
      <%= f.input :package, placeholder: "PLV" %> 
     </div> 
     <div class="col-sm-2 col-centered"> 
      <%= f.input :reason, placeholder: "Credit for Service Issue" %> 
     </div> 
     </div> 
     <div class="row row-centered"> 
     <div class="col-sm-6 col-centered"> 
      <%= f.input :detail, as: :text, label: "Why are we issuing a credit?" %> 
     </div> 
     </div> 
     <div class="row row-centered"> 
     <div class="col-sm-6 col-centered"> 
      <%= f.input :tech, placeholder: "AN" %> 
      <br> 
      <br> 
      <%= f.button :submit, "Submit", class: "btn btn-custom" %> 
     </div> 
     </div> 
    </div> 
<% end %> 

Answer 1

在所有簡單的表單是不是這個問題的根源。問題是你的風格，你需要第一套行高度和垂直對齊方式爲您塊：

.form-actions.creditrequest_form { 
    > .row.row-centered { 
    line-height: %{Parent-value}px; 

    > .col-sm-2.col-centered { 
     display: inline-block; /* can use vertical alignment */ 
     vertical-align: top; /* pull all to top */ 
     line-heigth: %{child-value}px; 
    } 
    } 
} 

更新：考慮到.error是在錯誤添加可加不對的風格。