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>

Bootstrap组织多行和列复选框

1 个答案: