如何将标签放在同一行答案

【问题标题】：how to put label in the same row如何将标签放在同一行
【发布时间】：2012-10-11 13:17:09
【问题描述】：

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

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

我的目标是根据屏幕宽度将它们分成几列。

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

有什么提示吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

可能是.row-fluid 使行宽取决于屏幕的宽度。
从技术上讲，如果您想利用引导程序的本机 .controls 和 .control-groups，这将是不正确的，正如 op 在他们的小提琴中指出的那样。

【解决方案2】：

您的代码几乎是正确的。您留下了几个 <div>s 未关闭，但您还有 .controls 和 .control-groups 嵌套不正确。

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：