html - 如何解决 iPhone 的 Bootstrap 复选框布局问题

Question

我已经使用 Bootstrap 设置了屏幕布局，对于大多数外形尺寸，一切看起来都很棒，但是在纵向模式下 iPhone 尺寸较小，我的复选框标签未对齐。我正在使用标签来包装复选框，以便可点击的目标更大。

html如下:

 <div class="row">
        <div class="col-lg-2 col-xs-12">
            <label>Endorsements</label><label class="required" ng-hide="row.hasNoEndorsements != undefined">*</label>
        </div>
        <div class="col-lg-3 col-xs-12">
            <label class="form-control"><input type="checkbox" value='false' title="None" ng-model="row.hasNoEndorsements" ng-click="vm.endorsementClick(row, true)"> None</label>
        </div>
        <div class="col-lg-3 col-xs-12">
            <label class="form-control"><input type="checkbox" value='true' title="Tanker" ng-model="row.isTanker" ng-click="vm.endorsementClick(row, false)"> Tanker</label>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2 col-xs-12">
        </div>
        <div class="col-lg-3 col-xs-12">
            <label class="form-control"><input type="checkbox" value='true' title="Doubles/Tripples" ng-model="row.isDoubleTriple" ng-change="vm.endorsementClick(row, false)">Double/Tripple</label>
        </div>
        <div class="col-lg-3 col-xs-12">
            <label class="form-control"><input type="checkbox" value='true' title="HazMat" ng-model="row.isHazmat" ng-change="vm.endorsementClick(row, false)"> HazMat</label>
        </div>
        <div class="col-lg-3 col-xs-12">
        </div>
        <div class="col-lg-2 hidden-xs hidden-sm">
            <button value="Remove License" title="Remove License" ng-click="vm.licenseRemove(row)" class="btn btn-info">Remove License</button>
        </div>
    </div>

在所有其他外形规范中，显示都符合预期。

Answer 1

似乎在包装 div 中添加一个复选框类有帮助

 <div class="col-lg-3 col-xs-12 **checkbox**">
                <label class="form-control"><input type="checkbox" value='false' title="None" ng-model="row.hasNoEndorsements" ng-click="vm.endorsementClick(row, true)"> None</label>
            </div>