동일한 행에 레이블을 붙이는 방법

Question

레이블을 만들 때 http://twitter.github.com/bootstrap/assets/css/bootstrap.css,
을 사용하면 하나의 열로 렌더링됩니다.

<label>..</label> 
<label>..</label> 
<label>..</label> 

내 목표는 화면의 너비에 따라 여러 열로 표시하는 것입니다. 여기

내 데모 http://jsfiddle.net/D2RLR/2557/

어떤 힌트가?

Answer 1

This example은 열을 사용하며 화면 크기만큼 더 많은 열을 추가합니다. 이것은 순전히 CSS와 HTML입니다.

This script은 컨테이너의 너비에 따라 열의 크기를 조정합니다. 단순히 열 수를 지정하십시오. 이렇게하면 모든 열이 항상 완벽하게 일치합니다. jquery를 사용하여 열 너비의 크기를 조정합니다.

css로 레이블을 플로팅 할 수 있습니다. 그런

<div class="column"> 
    <label class="float"></label> 
    <input type="checkbox" value="2"> Monday 
</div> 
<div class="column"> 
    <label class="float"></label> 
    <input type="checkbox" value="3"> Tuesday 
</div> 
... 
<div class="clear"></div> 

CSS는

.column { 
    width: 200px; 
    float: left; 
} 

.clear { 
    clear: both; 
} 

Answer 2

뭔가?

<div class="row"> 
    <div class="span3"><label>...</label> </div> 
    <div class="span3"><label>...</label> </div> 
    <div class="span3"><label>...</label> </div> 
    <div class="span3"><label>...</label> </div> 
</div> 

Answer 3

코드가 거의 정확했습니다. <div> 두 개를 닫지 않은 상태로 두었지만 .controls 및 .control-group도 잘못 중첩되어 있습니다.

코드가 수정 된 3 개 열 (예 : 자바 스크립트를 업데이트하고 체크 박스를 전환하기위한 버튼을 추가 한 업데이트 된 바이올린입니다. 토글 링 확인란을 계속 사용하려면 코드를 수정할 수 있습니다. 아주 쉽게) :

이

http://jsfiddle.net/D2RLR/2624/

(어쩌면