Question

使用http://twitter.github.com/bootstrap/assets/css/bootstrap.css，
当我制作一堆标签时，它们会在一列中呈现。

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

我的目标是根据屏幕的宽度将它们放在几列中。

这是我的演示http://jsfiddle.net/D2RLR/2557/

任何提示？

Answer 1

那样的东西？

<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

您的代码几乎是正确的。您留下了几个<div>未关闭，但您的.controls和.control-group嵌套错误。

这是一个更新的小提示，修复了你的代码以及一个包含3列的示例（我还更新了javascript并添加了用于切换复选框的按钮。如果你仍想使用复选框进行切换，你可以修改代码相当漂亮容易）：

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

（请确保在小提琴的html部分向下滚动以查看第二个示例，以防您有一个小屏幕）

Answer 3

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

如何将标签放在同一行

3 个答案: