2012-06-04 26 views
19

Bir takım onay kutularına sahip bir form alanım var - onay kutularını 1 yerine 3 sütun olarak nasıl görüntüleyebilirim? Buna benzerTwitter Bootstrap - formdaki sütunlar/sütunlar onay kutusu

şey:

enter image description here

Ben <div class="controls"> içinde bir satır/span div'leri ekleyerek denedim ama sol dolguya ekleyerek gibi görünüyor.

Belgelerdeki satır içi onay kutusu örneği olduğunu biliyorum ancak öğeler hizalanmamış.

cevap

34

Öyle gibi her .control kabın yerine .control-group kap içinde onay kutusu blokları ayırarak böyle bir kurulum elde edebilirsiniz :

<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/

+0

Andres, o .form-yatay nedenleri görünüyor Sol bir dolguya sahip .controls. Sen ne önerirsin? – RS7

+0

@ RS7, belgeler için gerekli olmayan, yerine .form-vertical' sınıfını kullanabilirsiniz. Demo: http://jsfiddle.net/LVFzK/1/ –

+0

Maalesef biraz kullanıyorum .form-horizontal - Başka bir yöntem görüyor musunuz? – RS7