如何解决 iPhone 的 Bootstrap 复选框布局问题答案

【问题标题】：How do I resolve Bootstrap checkbox layout issue for iPhone如何解决 iPhone 的 Bootstrap 复选框布局问题
【发布时间】：2015-07-04 21:29:30
【问题描述】：

我使用 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>

在所有其他外形尺寸中，显示均符合预期。

【问题讨论】：

标签： html ios css iphone twitter-bootstrap

【解决方案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>

【讨论】：