使用Twitter Bootstrap的兩列內聯表格

Question

我想使用Twitter Bootstrap製作預算模板。輸出應該有一個行標籤，兩個內聯輸入，一個總輸出，兩個內聯輸入和一個最終總輸出。這個想法是，每一行將是一個類別，而這對輸入將是數量和速率，當乘以時產生總數。它將類似於以下內容：

Category_1  Input_1 Input_2 Total=Input_1*Input_2  Input_3 Input_4 Total=Input_3*Input_4 

我在使用bootstrap中描述的類系統將所有這些放在一行上時遇到了問題。我可以在同一條線上得到兩個輸入，但我不知道如何將它與中間的非輸入範圍結合，然後是最後兩個輸入。我該怎麼做？

更新：

我已經通過幾次反覆去嘗試。這只是最新的嘗試失敗：

<div class="controls controls-row"> 
    <label class="control-label">Category 1</label> 
    <input class="span1" type="text" placeholder="Input 1"> 
    <input class="span1" type="text" placeholder="Input 2"> 
    <label class="control-label">Total 1</label> 
    <input class="span1" type="text" placeholder="Input 3"> 
    <input class="span1" type="text" placeholder="Input 4"> 
    <label class="control-label">Total 2</label> 
</div> 

Answer 1

<form class="form-inline"> 
    <span>Category 1</span> 
    <input type="text" class="input-small" placeholder="Input 1"> 
    <input type="text" class="input-small" placeholder="Input 2"> 
    <span>Total 1</span> 
    <input type="text" class="input-small" placeholder="Input 3"> 
    <input type="text" class="input-small" placeholder="Input 4"> 
    <span>Total 2</span> 
</form>​ 

這裏的fiddle。現在你只需要調整間距。

還要注意您使用的HTML元素，標籤should be associated與控件。

Answer 2

我想使用標籤，所以我想擁有for屬性。注意我不在標籤上使用控件標籤類，否則事情會變得混亂。由於標籤和輸入保持在一起，並且兩列首先包裝，我發現當您的窗口較窄或移動時，這會表現得更好。

<div class="form-inline"> 
    <span style="margin-right:8px"> 
     <label for="IsPublic">Is Public:</label> 
     <input id="IsPublic" .../> 
    </span> 
    <span> 
     <label for="IsPrivate">Is Private:</label> 
     <input id="IsPrivate" .../> 
    </span> 
</div>