使用引导程序响应式地设置复选框

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级以下属性：

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

你可以玩的宽度，使之适合你的需要。 这里是小提琴：JSBIN