Question

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

更新：如果使用JSFIDDLE改变了某些内容，则不确定。它用于显示重点，但不再那么做了

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

但是，如果我将控件标签类添加到包含复选框的div，则标签和复选框可以很好地水平对齐。但这对我来说很难过。

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

Answer 1

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

<label>

<强> http://jsfiddle.net/fjsnnh9g/

Answer 2

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

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

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

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

2 个答案: