html - 控制组中的 Twitter Bootstrap 和跨度

Question

我正在尝试实现一个简单的界面，其中有一系列按钮(复选框)，它们属于一个组。

我想拆分组，这样每行最多只能有 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 中有效。你可以看到 fiddle here .

Answer 1

您需要将每组三个复选框/标签分开，并将它们放在自己的 div 中，类名 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>

Here's a working example on jsFiddle .