Twitter 부트 스트랩 - 양식 내의 체크 박스 열/열

Question

여러 개의 체크 박스가있는 양식 필드가 있습니다. 어떻게 체크 박스를 1 대신 3 개의 열로 표시 할 수 있습니까? 이와 유사한

뭔가 :

나는 <div class="controls"> 내부 행/스팬 된 div를 추가 해봤지만 왼쪽 패딩을 추가 할 것으로 보인다.

문서에 인라인 체크 박스 예제가 있지만 요소가 정렬되지 않았다는 것을 알고 있습니다.

Answer 1

당신과 같이 각 .control 용기 대신 .control-group 컨테이너 내에서 체크 박스 블록을 분리하여 이러한 설정을 달성 할 수 :

이

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

데모 : http://jsfiddle.net/LVFzK/468/show/