Twitter Bootstrap - 如何組合表單佈局？

Question

我正在使用.form-horizontal來佈置我的表單。我確實希望標籤和表單域水平對齊。但是，在某些情況下，我需要多個表單域來水平對齊。例如，在收集信用卡信息的形式，我想是這樣的：

  Name: [___________] 
CC Expiry Date: [____] [____] 

是否有使用.form-horizontal在某些領域和.form-inline用於其他領域的方法嗎？

Answer 1

沒有什麼奧祕，只要把你的其他輸入一起：

<form class="form-horizontal"> 
    ... 
    <div class="control-group"> 
    <label class="control-label" for="input1">Label</label> 
    <div class="controls"> 
     <input type="text" id="input1" placeholder="Input1"> 
     <input type="text" id="input2" placeholder="Input2"> 
    </div> 
    </div> 
</form> 

Answer 2

只要改變control-group類form-inline

<form class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label" for="inputName">Name</label> 
    <div class="controls"> 
     <input type="text" id="inputName" placeholder="Name"> 
    </div> 
    </div> 
    <div class="form-inline"> 
    <div class="control-label"> 
    <label for="inputCC">CC</label> 
    <label for="inputExpiryDate">Expiry Date</label> 
    </div> 
    <div class="controls"> 
    <input type="text" id="inputCC" placeholder="CC" class="input-small"> 
    <input type="text" id="inputExpiryDate" placeholder="Expiry Date" class="input-small"> 
    </div> 
    </div><br/> 
    <div class="control-group"> 
    <div class="controls"> 

     <button type="submit" class="btn">Submit</button> 
    </div> 
    </div> 
</form> 

demo jsfiddle