javascript - Bootstrap organize multi row and column checkbox

/ What i'm trying to do is organize the checkboxes so that not only are they in line at each row, but also in organized columns so that the boxes arent scattered and unorganized.

i've tried quite a few different methods but this is the best i've been able to e up with so far.

<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>

What i've done is added   but it's still not correct, and makes my php loops more plicated.

https://jsfiddle/8tzLjwuk/ What i'm trying to do is organize the checkboxes so that not only are they in line at each row, but also in organized columns so that the boxes arent scattered and unorganized.

i've tried quite a few different methods but this is the best i've been able to e up with so far.

<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>

What i've done is added   but it's still not correct, and makes my php loops more plicated.

Share Improve this question asked Dec 2, 2015 at 5:08 Kevin K 1131 gold badge2 silver badges13 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

Adjust the class as needed.
Check the snippet in full screen

<link href="//maxcdn.bootstrapcdn./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap organize multi row and column checkbox - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)