Bootstrap組織多行和列複選框

Question

https://jsfiddle.net/8tzLjwuk/ 我想要做的是組織複選框，以便它們不僅在每行都排隊，而且還在有組織的列中，以便框不分散和無組織。

我試過很多不同的方法，但是這是最好的我已經能夠拿出這麼遠。

<div class="row"> 
    <div class="col-md-4">  
     <label class="checkbox-inline"><input type="checkbox" value="Mesmer" name="Checkbox[]">Mesmer</label> 
     <label class="checkbox-inline"><input type="checkbox" value="Guardian" name="Checkbox[]">Guardian</label>&#160;&#160;&#160;&#160; 
     <label class="checkbox-inline"><input type="checkbox" value="Necromancer" name="Checkbox[]">Necromancer</label> 
    </div> 
</div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <label class="checkbox-inline"><input type="checkbox" value="Ranger" name="Checkbox[]">Ranger</label>&#160; 
      <label class="checkbox-inline"><input type="checkbox" value="Elementalist" name="Checkbox[]">Elementalist</label> 
      <label class="checkbox-inline"><input type="checkbox" value="Warrior" name="Checkbox[]">Warrior</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <label class="checkbox-inline"><input type="checkbox" value="Thief" name="Checkbox[]">Thief</label>&#160;&#160;&#160;&#160; 
      <label class="checkbox-inline"><input type="checkbox" value="Engineer" name="Checkbox[]">Engineer</label>&#160;&#160;&#160;&#160;&#160; 
      <label class="checkbox-inline"><input type="checkbox" value="Revenant" name="Checkbox[]">Revenant</label> 
     </div> 
    </div> 

我做了什麼添加 但它仍然是不正確的，並讓我的PHP循環更加複雜。

Answer 1

根據需要調整的類。
檢查片段的全屏

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Mesmer" name="Checkbox[]">Mesmer</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Guardian" name="Checkbox[]">Guardian</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Necromancer" name="Checkbox[]">Necromancer</label> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Ranger" name="Checkbox[]">Ranger</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Elementalist" name="Checkbox[]">Elementalist</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Warrior" name="Checkbox[]">Warrior</label> 
 
    </div> 
 

 
</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Thief" name="Checkbox[]">Thief</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Engineer" name="Checkbox[]">Engineer</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" value="Revenant" name="Checkbox[]">Revenant</label> 
 
    </div> 
 
</div> 
 
</div>