html - 使用Bootstrap并排设置复选框

我想并排设置复选框以直观地表示某些内容。它在我的网站上看起来不错，但是在尝试调整大小或在iPad上时会崩溃。我可能犯了一个愚蠢的错误，但我希望对我的代码进行任何更正。

http://www.bootply.com/1a5yzjMAGp

<div class="col-md-6">
<div class="col md-6">
<div class="checkbox checkbox-primary">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox1">
Art
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox2">
Drama
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox3">
Foods and Nutrition
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox4">
Geography
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox5">
Industrial Arts/Shop Programs
</label>
</div>
</div>
</div>
<div class="col md-6">
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox6">
Math
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox6">
Music
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox6">
Technology
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox6">
Science
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox6">
Physical Education/Health
</label>
</div>
</div>

最佳答案

您可以尝试为类checkbox的div提供以下属性：

.checkbox {
width:250px;
float:left;
}

您可以随意调整宽度以使其适合您的需求。
这是小提琴：JSBIN