javascript - Bootstrap 和 AngularJS : form-control-lg changes only input size, 不是标签

Question

我正在研究 AngularJS custom text input component :

<div class="form-group has-feedback"
     ng-class="[$ctrl.sizeClass, {'has-error': $ctrl.isNotValid(), 'has-success': 
     $ctrl.isValid()}]"
>
   <label class="control-label col-xs-3" for="{{$ctrl.name}}">
    <span ng-bind="$ctrl.label"></span>
    <small ng-if="$ctrl.isRequired">
      <span aria-hidden="true" class="text-danger">
        *
      </span>
      <span class="sr-only">
        (field is required)
      </span>
    </small>
   </label>
   <!-- Input which works perfect -->
</div>

我想根据 Bootstrap form-group sizing 添加尺寸:

var sizes = {
  'sm': 'form-group-sm',
  'lg': 'form-group-lg',
};

$ctrl.$onChanges = function (changes) {
  if (changes.size) {
    $ctrl.sizeClass = sizes[$ctrl.size];
  }
} 

并且input 大小正确改变，但是label 大小不会改变。我很确定我错过了一些愚蠢的事情。你愿意帮助我吗？预先感谢您的每一个回答。

Answer 1

我想你错过了一些 CSS:

.form-horizontal .form-group-sm .control-label {
  padding-top: 6px;
  font-size: 12px;
}