Twitter的引導 - 在線表單

Question

我有這樣的形式：

<!-- First Name--> 
    <div class="control-group"> 
     <label class="control-label">First Name</label> 
     <div class="controls"> 
     <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
     </div> 
    </div> 
    <!-- Last Name--> 
    <div class="control-group inline"> 
     <label class="control-label">Last Name</label> 
     <div class="controls"> 
     <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
     </div> 
    </div> 
    <!-- Telefonnumber--> 
    <div class="control-group"> 
     <label class="control-label">Telefonnumber</label> 
     <div class="controls"> 
     <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
     </div> 
    </div> 
    <!-- Street--> 
    <div class="control-group"> 
     <label class="control-label">Street</label> 
     <div class="controls"> 
     <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
     </div> 
    </div> 

我想旁邊顯示名，並在這兩個領域的Telefonnumber姓。

如何在twitter引導中實現這一點？

者均基於jsfiddle

Answer 1

白手起家有幾個例子的形式佈局，你可以use here。

根據他們的文檔，當你想在一條線上多個時使用controls-row。 （form-inline是爲整個表單內聯）。在繼續使用他們的課程之前，您會希望閱讀他們的scaffolding documentation。

更新jsfiddle

PS .. HTML指針

1. 不要重複id（和name，如果你能避免它）。例如，id="textinput"在整個頁面中應該是唯一的。 name不必是唯一的，但最好的做法是匹配id。
2. 將for屬性添加到標籤。