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

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 中将输出 window 设置为最小 768px 看看我的意思。

Answer 1

当.has-errorclass存在时使用可以添加css：

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