如何將標籤放在同一行中

通過使用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

如何將標籤放在同一行中

回答

相關問題