Twitter引導和跨控制組

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中工作。 你可以看到小提琴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。