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

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

我想實現的安排是：

First Name  Last Name 
[_______________] [______________] 

Company Name 
[________________________________]

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

這將是標記完成此？

來源

2013-02-19 Pep

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

screenshot of result

<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>

來源

2013-02-20 03:47:18 Shail

上述解決方案並沒有爲我工作。工作的解決方案使用bootstrap網格系統，如下所示：http://stackoverflow.com/a/27159199/381082 – DeveloperDan 2016-08-03 15:14:53

-1

據我所知，你將不得不使用一張桌子來使它看起來像這樣，並確保'姓'文本保留在其框中。您可以使用<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>

來源

2013-02-20 00:08:29

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

回答

相關問題