通过使用http://twitter.github.com/bootstrap/assets/css/bootstrap.css,
当我制作一堆标签时,它们会在一列中呈现。
<label>..</label>
<label>..</label>
<label>..</label>
我的目标是根据屏幕的宽度将它们分成几列。
这是我的演示http://jsfiddle.net/D2RLR/2557/
有什么提示吗?
通过使用http://twitter.github.com/bootstrap/assets/css/bootstrap.css,
当我制作一堆标签时,它们会在一列中呈现。
<label>..</label>
<label>..</label>
<label>..</label>
我的目标是根据屏幕的宽度将它们分成几列。
这是我的演示http://jsfiddle.net/D2RLR/2557/
有什么提示吗?
类似的东西?
<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>
您的代码几乎是正确的。你留下了几个<div>
s 未关闭,但你也有错误地嵌套了.controls
and 。.control-group
这是一个更新的小提琴,您的代码已修复以及一个包含 3 列的示例(我还更新了 javascript 并添加了用于切换复选框的按钮。如果您仍想使用复选框进行切换,您可以很容易地修改代码):
http://jsfiddle.net/D2RLR/2624/
(确保在小提琴的 html 部分向下滚动以查看第二个示例,以防屏幕小)
此示例使用列,并将在屏幕大小允许的情况下添加更多列。这纯粹是css和html。
此脚本将根据它们所在容器的宽度调整列的大小。只需指定列数。这样,所有列将始终完美地排成一行。这使用 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;
}