0

グループの一部である一連のボタン（チェックボックス）がある単純なインターフェイスを実装しようとしています。

グループを分割して、行ごとに最大3つしか持てないようにします。

<div class="container">
  <div class="control-group">
    <p class="pull-left"><label class="control-label" for="Languages">Lingue</label></p>
    <div class="controls">
      <div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
        <input type="checkbox" value="1" id="Languages_0" name="Languages" checked />
        <label class="btn btn-info btn-small active" for="Languages_0">Italiano</label>
        <input type="checkbox" value="2" id="Languages_1" name="Languages" checked />
        <label class="btn btn-info btn-small active" for="Languages_1">Francese</label>
        <input type="checkbox" value="3" id="Languages_2" name="Languages" checked />
        <label class="btn btn-info btn-small active" for="Languages_2">Inglese</label>
        <input type="checkbox" value="4" id="Languages_3" name="Languages"  />
        <label class="btn btn-info btn-small " for="Languages_3">Spagnolo</label>
        <input type="checkbox" value="5" id="Languages_4" name="Languages"  />
        <label class="btn btn-info btn-small " for="Languages_4">Tedesco</label>
        <input type="checkbox" value="6" id="Languages_5" name="Languages"  />
        <label class="btn btn-info btn-small " for="Languages_5">Portoghese</label>
        <input type="checkbox" value="7" id="Languages_6" name="Languages"  />
        <label class="btn btn-info btn-small " for="Languages_6">Bulgaro</label>
        <input type="checkbox" value="8" id="Languages_7" name="Languages"  />
        <label class="btn btn-info btn-small " for="Languages_7">Lettone</label>
      </div>
    </div>
  </div>
</div>

span3をどこにでも配置しようとしましたが、IEでのみ機能するようです。ここでフィドルを見ることができます。

4

1 に答える 1

3

div3つのチェックボックス/ラベルの各グループを分割し、クラス名を使用してそれらを独自に配置する必要がありますcontrols。

<div class="container">
    <div class="control-group">
        <p class="pull-left">
            <label class="control-label" for="Languages">Lingue</label>
        </p>
        <div class="controls">
            <div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
                <input type="checkbox" value="1" id="Languages_0" name="Languages" checked
                />
                <label class="btn btn-info btn-small active" for="Languages_0">Italiano</label>
                <input type="checkbox" value="2" id="Languages_1" name="Languages"
                checked />
                <label class="btn btn-info btn-small active" for="Languages_1">Francese</label>
                <input type="checkbox" value="3" id="Languages_2" name="Languages"
                checked />
                <label class="btn btn-info btn-small active" for="Languages_2">Inglese</label>/></div>
        </div>
        <div class="controls">
            <div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
                <input type="checkbox" value="4" id="Languages_3" name="Languages" />
                <label class="btn btn-info btn-small " for="Languages_3">Spagnolo</label>
                <input type="checkbox" value="5" id="Languages_4" name="Languages"
                />
                <label class="btn btn-info btn-small " for="Languages_4">Tedesco</label>
                <input type="checkbox" value="6" id="Languages_5" name="Languages"
                />
                <label class="btn btn-info btn-small " for="Languages_5">Portoghese</label>
            </div>
        </div>
        <div class="controls">
            <div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
                <input type="checkbox" value="7" id="Languages_6" name="Languages" />
                <label class="btn btn-info btn-small " for="Languages_6">Bulgaro</label>
                <input type="checkbox" value="8" id="Languages_7" name="Languages"
                />
                <label class="btn btn-info btn-small " for="Languages_7">Lettone</label>
            </div>
        </div>
    </div>
</div>

これがjsFiddleの実例です。

于 2013-02-08T18:45:33.997 に答える