来自 Bootstrap 元素的文本字段和文本区域的对齐方式答案

【问题标题】：Alignment of text field and text area from Bootstrap elements来自 Bootstrap 元素的文本字段和文本区域的对齐方式
【发布时间】：2014-11-25 10:33:36
【问题描述】：

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

如图所示。电话号码文本字段稍微超出了文本区域的高度。我的 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 %>

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

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

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

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

检查fiddle

【讨论】：