Bootstrap 和 AngularJS：form-control-lg 只改变输入大小，不改变标签答案

【问题标题】：Bootstrap and AngularJS: form-control-lg changes only input size, not labelBootstrap 和 AngularJS：form-control-lg 只改变输入大小，不改变标签
【发布时间】：2017-05-02 00:28:38
【问题描述】：

我正在处理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 的大小不会更改。我很确定我错过了一些愚蠢的愚蠢行为。你愿意帮助我吗？提前感谢您的每一个回答。

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我认为你错过了一些 CSS：

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

【讨论】：

你是对的，我在几秒钟前才发现它:) Bootstrap 上有一些奇怪的媒体查询，我会在他们的 Github 上将其报告为问题，因为这很不一致。

【解决方案2】：

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

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

并且 Plunker 窗口比 768 px 窄（尝试调整代码面板的大小来测试它）。我将在 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-*)。

【讨论】：