如何保持複選框不崩潰

Question

我使用引導來創建以下表單。它在瀏覽器中可以正常工作，但是當我縮小它時，盒子和標籤堆疊在一起。在bootstrap中是否有一個簡單的解決方案，因此即使在移動屏幕上，標籤和複選框仍然保持一致？

https://www.bootply.com/quVvJ0pLNo

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group"> 
 
    <label for="test" class="col-sm-5 control-label">mytest</label> 
 
    <div class="col-sm-7 text-center"> 
 
     <div class="row"> 
 
      <div class="col-sm-1">Mon</div> 
 
      <div class="col-sm-1">Tue</div> 
 
      <div class="col-sm-1">Wed</div> 
 
      <div class="col-sm-1">Thu</div> 
 
      <div class="col-sm-1">Fri</div> 
 
      <div class="col-sm-1">Sat</div> 
 
      <div class="col-sm-1">Sun</div> 
 
     </div> 
 
     <div class="row checkbox text-center"> 
 
      <div class="col-sm-1 "> 
 
       <label> 
 
        <input type="checkbox" name="test" id="test2" value="1" aria-label="1"> 
 
       </label> 
 
      </div> 
 
      <div class="col-sm-1"> 
 
       <label> 
 
        <input type="checkbox" name="test" id="test2" value="2" aria-label="2"> 
 
       </label> 
 
      </div> 
 
      <div class="col-sm-1"> 
 
       <label> 
 
        <input type="checkbox" name="test" id="test2" value="3" aria-label="3"> 
 
       </label> 
 
      </div> 
 
      <div class="col-sm-1"> 
 
       <label> 
 
        <input type="checkbox" name="test" id="test2" value="4" aria-label="4"> 
 
       </label> 
 
      </div> 
 
      <div class="col-sm-1"> 
 
       <label> 
 
        <input type="checkbox" name="test" id="test2" value="5" aria-label="5"> 
 
       </label> 
 
      </div> 
 
      <div class="col-sm-1"> 
 
       <label> 
 
        <input type="checkbox" name="test" id="test2" value="6" aria-label="6"> 
 
       </label> 
 
      </div> 
 
      <div class="col-sm-1"> 
 
       <label> 
 
        <input type="checkbox" name="test" id="test2" value="7" aria-label="7"> 
 
       </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

嘗試使用複選框與標籤的文本和用於col-xs-1代替col-sm-1用於移動屏幕相同的輸出。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group"> 
 
    <label for="test" class="col-sm-5 control-label">mytest</label> 
 
    <div class="col-sm-7 text-center"> 
 
     <div class="row"> 
 
      <div class="col-xs-1"> 
 
       <label> 
 
        Mon<br/> 
 
        <input type="checkbox" name="test" id="test1" value="1" aria-label="1"> 
 
       </label> 
 
      </div> 
 
      <div class="col-xs-1"> 
 
       <label> 
 
        Tue <br/> 
 
        <input type="checkbox" name="test" id="test2" value="2" aria-label="2"> 
 
       </label> 
 
      </div> 
 
      <div class="col-xs-1"> 
 
       <label> 
 
        Wed <br/> 
 
        <input type="checkbox" name="test" id="test3" value="3" aria-label="3"> 
 
       </label> 
 
      </div> 
 
      <div class="col-xs-1"> 
 
       <label> 
 
        Thu <br/> 
 
        <input type="checkbox" name="test" id="test2" value="4" aria-label="4"> 
 
       </label> 
 
      </div> 
 
      <div class="col-xs-1"> 
 
       <label> 
 
        Fri <br/> 
 
        <input type="checkbox" name="test" id="test5" value="5" aria-label="5"> 
 
       </label> 
 
      </div> 
 
      <div class="col-xs-1"> 
 
       <label> 
 
        Sat <br/> 
 
        <input type="checkbox" name="test" id="test6" value="6" aria-label="6"> 
 
       </label> 
 
      </div> 
 
      <div class="col-xs-1"> 
 
       <label> 
 
        Sun <br/> 
 
        <input type="checkbox" name="test" id="test7" value="7" aria-label="7"> 
 
       </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

可以覆蓋缺省引導CSS：

.form-group .row [class*="col-"] { 
    float: left; 
    width: 8.33333333%; 
}