使用 Bootstrap 响应式并排设置复选框

Question

我想并排设置复选框以直观地表示某些内容。它在我的网站上看起来不错，但在尝试调整大小或在 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>

Answer 1

您可以尝试为类 checkbox 的 div 赋予以下属性：

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

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