對齊文本框和按鈕，引導

Question

我已經有一個引導樣式文本字段和輸入按鈕多次發生以下問題。請注意，他們不是垂直對齊：

如何協調這兩個元素？這裏是HTML：

<div class="span6"> 
    <input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button> 
</div> 

Answer 1

爲了完成這個，你必須使用正確的Twitter Bootstrap classes for forms。

在這種情況下，即.form-inline類。

這裏是正確的標記：

<form class="form-inline"> 
    <input type="text" class="input-small" placeholder="Email"/> 
    <button type="submit" class="btn">Sign in</button> 
</form> 

這裏是演示http://jsfiddle.net/YpXvT/42/

Answer 2

<div class="navbar-form pull-left"> 
    <input type="text" class="span2"> 
    <button class="btn">Sign up</button> 
</div> 

從http://twitter.github.io/bootstrap/components.html#navbar

或

<div class="input-append"> 
    <input type="text"/> 
    <button class="btn">Sign up</button> 
</div> 

或複製類

<div class="form-horizontal"> 
    <input type="text"/> 
    <button class="btn">Sign up</button> 
</div> 

Answer 3

<div class="input-group"> 
     <input type="email" class="form-control" required="required" placeholder="monEmail@domaine.fr"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button> 
     </span> 
    </div> 

改變的CSS輸入基的BTN在自舉分鐘：垂直對齊=>頂部 它對我來說工作

的