使用引導程序在表單中排列輸入文本字段

Question

我想將一些「標籤+文本框」組以水平和垂直排列組合的方式放置。 Bootstrap具有表單橫向類，但是將標籤放在右側而不是頂部。

我想實現的安排是：

First Name  Last Name 
[_______________] [______________] 

Company Name 
[________________________________] 

也就是說，前兩個字段（First Name和姓）對同一行的文本框中，但其對頂級品牌，不水平向左，而第三個字段（公司名稱）出現在第二行，並且標籤位於頂部。

這將是標記完成此？

Answer 1

可以實現下列方式的具體形式爲：
Jsfiddle with Bootstrap Form
See Live result in browser

<form class="well span8"> 
    <div class="row"> 
    <div class="span3"> 
     <label>First Name</label> 
     <input type="text" class="span3" placeholder="Your First Name"> 
     <label>Company</label> 
     <input type="text" class="span3" placeholder="Company"> 
    </div> 
    <div class="span5"> 
     <label>Last Name</label> 
     <input type="text" class="span3" placeholder="Your Last Name"> 
    </div> 
</div> 

Answer 2

據我所知，你將不得不使用一張桌子來使它看起來像這樣，並確保'姓'文本保留在其框中。您可以使用<br/>標記分隔線條。

<form class="form-inline"> 
<table> 
    <tr> 
     <td> 
      <label for="fn">First Name</label> 
      <br/> 
      <input name="fn" type="text" class="input-small" /> 
     </td> 
     <td> 
      <label for="ln">Last Name</label> 
      <br/> 
      <input name="ln" type="text" class="input-small" /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <label for="cn">Company Name</label><br/> 
      <input type="text" class="input-large" /> 
     </td> 
    </tr> 
</table> 
</form>