如何防止复选框崩溃

Question

我使用bootstrap创建以下表单。它在浏览器中工作正常，但当我缩小它时，盒子和标签叠加在一起。在引导程序中是否有一个简单的解决方法，所以即使在移动屏幕上标签和复选框也保持一致？

https://www.bootply.com/quVvJ0pLNo

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

您可以覆盖默认的bootstrap css：

C a