html - 从 Bootstrap 元素对齐文本字段和文本区域

Question

我不确定如何对齐我的文本字段和我的文本区域。高度略有差异

如图所示。电话号码文本字段稍微超出了文本区域的高度。我的 HTML 中有 Ruby on Rails 语法，但要应用类，只需在 class: 中添加类名。我的 HTML 使用了 twitter bootstrap 提供的所有 css。我尝试更改行，但它往往会延伸得太远

HTML:

<%= form_for(:contact, remote: true, class: "contact-input") do |f| %>
  <div class="col-md-12">
    <div class="col-md-6">
      <div class="form-group">
        <%= f.text_field(:first_name, class: "form-control", placeholder: "First name")%>
      </div>
      <div class="form-group">
        <%= f.text_field(:last_name, class: "form-control", placeholder: "Last name") %>
      </div>
      <div class="form-group">
        <%= f.email_field(:email, class: "form-control", placeholder: "Email") %>
      </div>
      <div class="form-group">
        <%= f.telephone_field(:phone_number, class: "form-control", placeholder: "Phone number") %>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <%= f.text_area(:message, class: "form-control", rows: "8", placeholder: "Message...") %>
      </div>
    </div>
  </div>
  <%= f.submit(class: "btn btn-xl") %>
<% end %>

Answer 1

文本区域的高度取决于行数。

所以这可以通过使用自定义 CSS 类稍微减少文本字段的边距来完成

.newMargin{
    margin-bottom:13px !important;
}

检查 fiddle