Question

我使用水平表单和自定义错误：

<div class="form-horizontal">
  <form name="ctrl.myForm" ng-submit="ctrl.save()">
    <div class="form-group col-sm-12 text-center">
      <color-picker selected="ctrl.selectedColor"></color-picker>
    </div>
    <div class="form-group has-error">

      <label for="logName" class="col-sm-3 control-label">Log Name</label>
      <div class="col-sm-9">
        <label ng-show="ctrl.logNameHasError" class="control-label" for="logName">
          <i class="fa fa-times-circle-o"></i> Input with error
        </label>
        <input type="text" ng-model="ctrl.logName" class="form-control" id="logName"
               placeholder="Enter a new log name" required>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-3 col-sm-9">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="ctrl.isDailyDigestEmail"> Daily Digest Email
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-3 col-sm-9">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="ctrl.isNewErrorEmail"> New Error Email
          </label>
        </div>
      </div>
    </div>
  </form>

请打开DEMO，您会看到Log Name字段的对齐方式错误。如何居中？
使JSBIN中的输出窗口最小为768px，看看我的意思。

Answer 1

使用可以在.has-error类存在时添加css：

.form-group.has-error .col-sm-3.control-label {
    padding-top: 34px;
}

存在错误类时集中输入标签

1 个答案: