如何将标签放在同一行中

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

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

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

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

任何提示？

来源

2012-10-10 Lorraine Bernard

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

来源

2012-10-10 21:33:04

类似的东西？

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

来源

2012-10-10 21:39:11 kappatech

也许'.row液'使行宽取决于屏幕的宽度。 – Sherbrow

从技术上讲，如果你想利用bootstrap的native .controls和.control-groups，就像op在他们的小提琴中指出的那样，这是不正确的。 – jonschlinkert

你的代码几乎是正确的。您遗漏了几个<div> s，但您也有.controls和 s嵌套错误。

这里是一个固定的代码更新的小提琴以及一个3列的例子（我也更新了javascript并添加了用于切换复选框的按钮，如果您仍想使用复选框来切换，您可以修改代码很容易地）：

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

（请确保您在拨弄看到第二个例子中的HTML部分向下滚动，如果你有一个小屏幕）

来源

2012-10-11 04:31:48 jonschlinkert

如何将标签放在同一行中

回答

相关问题