引导控件标签类导致复选框与 Angular 应用程序中的标签不对齐答案

【问题标题】：Boostrap control-label class causing checkbox to not be aligned with label in Angular app引导控件标签类导致复选框与 Angular 应用程序中的标签不对齐
【发布时间】：2016-01-23 02:59:41
【问题描述】：

在我的角度应用程序中，我需要不同列中的标签和复选框。这会导致复选框未与标签对齐（它略高且未与标签文本“GROUP”水平居中）

更新：不确定 JSFIDDLE 是否有所改变。它曾经显示未对齐，但现在不再这样做了

请看这里http://jsfiddle.net/LLvmxd0s/7/

    <div class="form-group">
        <label class="col-sm-5 control-label">GROUP</label>
        <div class="col-sm-6">
            <input type="checkbox" ng-model="grp" class="pull-left" ng-true-value="'Y'" ng-false-value="'N'"/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-5 control-label">GROUP</label>
        <div class="col-sm-6 control-label">
            <input type="checkbox" ng-model="grp" class="pull-left" ng-true-value="'Y'" ng-false-value="'N'"/>
        </div>
    </div>

但是，如果我将 control-label 类添加到包含复选框的 div 中，那么标签和复选框会很好地相互水平对齐。不过这对我来说感觉很奇怪。

有没有更好的方法来解决这个对齐问题？

【问题讨论】：

标签： angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您在小提琴中指的是 bootstrap 2.3.1 CSS，但使用的是 bootstrap 3.x 网格系统？无论如何，当所有doc examples 被清除时，您必须在.checkbox 父级中包含一个复选框。您还应该将包含复选框的<div> 包装在<label> 元素本身内。我想这就是你尝试使用丑陋的.pull-left 的原因。

<div class="form-group">
  <div class="checkbox">
    <label class="col-sm-5 control-label">
      <div class="col-sm-6">
        <input type="checkbox" ng-model="grp" ng-true-value="'Y'" ng-false-value="'N'" />GROUP
      </div>
    </label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <label class="col-sm-5 control-label">
      <div class="col-sm-6">
        <input type="checkbox" ng-model="grp" ng-true-value="'Y'" ng-false-value="'N'" />GROUP
      </div>
    </label>
  </div>
</div>

http://jsfiddle.net/fjsnnh9g/

【讨论】：

这是非常有用的信息，但是，我需要复选框前面的标签文本（在本例中为单词 GROUP）。

【解决方案2】：

为了修复它，我在包含复选框的 div 中添加了另一个类，并为其提供了以下 css

<div class="col-sm-7 checkbox-align">
      <input type="checkbox"

.checkbox-align {
  padding-top: 7px;
  margin-bottom: 0;
  vertical-align: middle;
}

【讨论】：