2014-11-25 93 views
0

我不知道如何對齊我的文本字段和我的文本區域。有高度從引導元素對齊文本字段和文本區域

enter image description here

稍有差異正如你可以在圖片中看到。電話號碼文本字段延伸超過了文本區域的高度。我的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 %> 

回答

1

爲文本區的高度取決於行數。

因此,這可以通過減少文字的邊緣進行使用自定義CSS類

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

檢查fiddle

域一點點