Bootstrap：混合按鈕和輸入框

Question

請參閱this fiddle，其中我有一個按鈕和三個輸入框，並使用Bootstrap。

<div class='container'> 
    <div class='row'> 
     <form class='span10'> 
      <input type='text' placeholder='Label' id='new-row-label' class='span3'> 
      <input type='text' placeholder='Orders' id='new-row-orders' class='span2'> 
      <input type='text' placeholder='Items' id='new-row-items' class='span2'> 
      <div class='btn span2' id='add-row'>Add new item</div> 
     </form> 
    </div> 
</div>​ 

兩件事情錯在這裏：

1. 按鈕比輸入框略低。
2. 該按鈕位於左側左側，當我在我的代碼中出現後的輸入框。

我怎樣纔能有三個輸入框和一個按鈕，都在同一高度對齊，右邊的按鈕？

Answer 1

如果用btn添加pull-right類這樣

<div class='btn pull-right span2' id='add-row'>Add new item</div> 

會浮的按鈕右側like this example但它似乎並不低我。

Answer 2

使用表單類進行內聯形式：

<form class="form-inline"> 
    <div class="row"> 
     <input type='text' placeholder='Label' id='new-row-label' class='span3'> 
     <input type='text' placeholder='Orders' id='new-row-orders' class='span2'> 
     <input type='text' placeholder='Items' id='new-row-items' class='span3'> 
     <button type="button" class="btn" id='add-row'>Add new item</button> 
    </div> 
</form>

類=「span10」的FORM標籤也擺脫佈局。

http://twitter.github.com/bootstrap/base-css.html#forms