how to put label in the same row - html

Question

By using http://twitter.github.com/bootstrap/assets/css/bootstrap.css,
when I make a stack of labels, they are rendered in one column.
<label>..</label>
<label>..</label>
<label>..</label>
My goal is to put them in several columns depending by the width of the screen.
Here is my demo http://jsfiddle.net/D2RLR/2557/
Any hints?

Answer 1

Something like that?
<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 2

Your code was almost correct. You left a couple of <div>s unclosed, but you also had the .controls and .control-groups nested incorrectly.
Here is an updated fiddle with your code fixed as well as an example with 3 columns (I also updated the javascript and added buttons for toggling the checkboxes. If you want to still use a checkbox for toggling you can modify the code pretty easily):
http://jsfiddle.net/D2RLR/2624/
(make sure you scroll down in the html section of the fiddle to see the second example, in case you have a small screen)

Answer 3

This example uses columns and will add more columns across as the screen size will allow. This is purely css and html.
This script will size the columns based on the width of the container they are in. Simply specify the number of columns. This way all columns will always fit perfectly in a row. This uses jquery to resize the column widths.
You could float the labels with 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;
}