Twitter Bootstrap - pola wyboru kolumn/kolumn w formularzu

Question

Mam pole formularza, które ma wiele pól wyboru - jak wyświetlić pola wyboru jako 3 kolumny zamiast 1?

Coś podobnego do tego:

Próbowałem dodając DIV wiersz/span wewnątrz <div class="controls"> ale wydaje się być dodanie lewy dopełnienie.

Wiem, że w dokumencie jest wstawiony przykład pola wyboru, ale elementy nie są wyrównane.

Answer 1

można osiągnąć taką konfigurację poprzez oddzielenie bloków zaznaczenie pola wyboru w pojemniku .control-group zamiast każdego .control kontenera tak:

<div class="control-group"> 
    <p class="pull-left">Payment Types</p> 
    <div class="controls span2"> 
     <label class="checkbox"> 
      <input type="checkbox" value="option1" id="inlineCheckbox1"> Cash 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option2" id="inlineCheckbox2"> Invoice 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option3" id="inlineCheckbox3"> Discover 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option3" id="inlineCheckbox3"> Financing 
     </label> 
    </div> 
    <div class="controls span2"> 
     <label class="checkbox"> 
      <input type="checkbox" value="option1" id="inlineCheckbox1"> Check 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option2" id="inlineCheckbox2"> American Express 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option3" id="inlineCheckbox3"> MasterCard 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option3" id="inlineCheckbox3"> Google Checkout 
     </label> 
    </div> 
    <div class="controls span2"> 
     <label class="checkbox"> 
      <input type="checkbox" value="option1" id="inlineCheckbox1"> Traveler's Check 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option2" id="inlineCheckbox2"> Diner's Club 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option3" id="inlineCheckbox3"> Visa 
     </label> 
     <label class="checkbox"> 
      <input type="checkbox" value="option3" id="inlineCheckbox3"> Paypal 
     </label> 
    </div> 
</div> 

Demo: http://jsfiddle.net/LVFzK/468/show/