使用引導程序響應式地設置複選框

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