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

我找到了解决方案。这是因为Bootstrap的CSS media query：

@media (min-width: 768px) 
.form-horizontal .form-group-lg .control-label {
    padding-top: 11px;
    font-size: 18px;
}

而Plunker窗口的宽度小于768像素（尝试调整代码面板的大小以进行测试）。我将在Bootstrap的Github上将其报告为问题。报道：Sizes for form-horizontal's .control-label on min-width < 768px does not work as expected for .control-label but work for .form-control (visible with with .col-xs-*)。

Answer 2

我认为你错过了一些CSS：

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

Bootstrap和AngularJS：form-control-lg仅更改输入大小，而不更改标签

2 个答案: