如何解决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>