Bootstrap 3中非內聯表單中的內聯表單元素？

Question

Bootstrap表單中的某些表單元素是可以內聯的，而其餘的不是？

在我的表單中，我希望使所有內容佔用全部6列，除了城市，州和ZIP以外，應占用一行。見下面的代碼：

<form id="main-form" role="form"> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
     <label for="bill-name">Name</label> 
     <input type="text" class="form-control" id="bill-name" 
     placeholder="Full name"> 
     </div> 
     <div class="form-group"> 
     <label for="bill-company">Company</label> 
     <input type="text" class="form-control" id="bill-company" 
     placeholder="Company name"> 
     </div> 
     <div class="form-group"> 
     <label for="bill-address1">Address</label> 
     <input type="text" class="form-control" id="bill-address1" 
     placeholder="Street address"> 
     </div> 
     <div class="form-group"> 
     <label for="bill-address2">Address 2</label> 
     <input type="text" class="form-control" id="bill-address2" 
     placeholder="Suite, building number, etc."> 
     </div> 
     <div class="form-group"> 
     <label for="bill-city">City</label> 
     <input type="text" class="form-control" id="bill-city" 
     placeholder="City"> 
     </div> 
     <div class="form-group"> 
     <label for="bill-state">State</label> 
     <input type="text" class="form-control" id="bill-state" 
     placeholder="State"> 
     </div> 
    </div> 
    </div> 
</form> 

Answer 1

這是可嵌套電網的美麗。結果並不是真正的內聯，但我認爲它更有效。

<div class="row"> 
    <div class="form-group col-sm-6"> 
     <label for="bill-city">City</label> 
     <input type="text" class="form-control" id="bill-city" placeholder="City"> 
    </div> 
    <div class="form-group col-sm-6"> 
     <label for="bill-state">State</label> 
     <input type="text" class="form-control" id="bill-state" placeholder="State"> 
    </div> 
</div> 

Fiddle

請注意，這僅適用於sm及以上屏幕的寬度。您可以將該課程更改爲col-xs-6，以便一路順利完成。