html - 同じ行にラベルを配置する方法

Question

http://twitter.github.com/bootstrap/assets/css/bootstrap.cssを使用
すると、ラベルのスタックを作成すると、1 つの列に表示されます。

<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>いくつかのs を閉じずに残しましたが、 .controlsandも.control-group正しくネストされていませんでした。

これは、コードを修正した更新されたフィドルと、3 列の例です (JavaScript も更新し、チェックボックスを切り替えるためのボタンを追加しました。切り替えにチェックボックスを引き続き使用したい場合は、コードをかなり簡単に変更できます)。

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

(画面が小さい場合は、フィドルの html セクションを下にスクロールして 2 番目の例を確認してください)

Answer 3

この例では列を使用し、画面サイズが許す限り列を追加します。これは純粋にcssとhtmlです。

このスクリプトは、列が入っているコンテナーの幅に基づいて列のサイズを決定します。列の数を指定するだけです。このようにして、すべての列が常に1行に完全に収まります。これは、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;
}