css - 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-012345" %>
        </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

Simple Form 根本不是这个问题的根源。问题是你的样式，你需要先为你的 block 设置行高和垂直对齐方式:

.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 是在错误时添加的，它可以添加不正确的样式。