AngularJS ng-class 无法覆盖 Bootstrap 下拉 CSS 规则

Question

使用 AngularJS-1.2.26 指令 ng-class，我试图覆盖下拉菜单和下拉标题的 Bootstrap 3.2 CSS 规则，但我的新字体大小、填充、边距不影响 html 显示。

我正在使用 AJS1.2.26 ng-class 成功覆盖（BS3 基类）navbar-brand、navbar-nav 以及其他使用 AJS 技术的方法，例如：

<a data-ng-class="settings.navbarBrandDensity" class="navbar-brand" ui-sref="home">App</a>
<ul data-ng-class="settings.navbarNavDensity" class="nav navbar-nav">
<span data-ng-class="{invisible: settings.displayDensity != 'comfortable'}"> class="fa fa-check fa-fw" </span>&nbsp;&nbsp;Comfortable</a>

我有一个显示导航栏工作的 Plunker，但下拉菜单不起作用：

http://plnkr.co/edit/TKq3MQdSaK3aTXJgSirU

在上面的 Plunker 中，点击齿轮图标（例如设置）在 Comfortable Cozy 之间切换，Compact 和导航栏会改变，但相关的下拉菜单不会改变。

变量 displayDensity、navbarBrandDensity、navbarNavDensity 在 MainController 的 .run 中初始化，在 .controller 中我设置了 $watches。基本理念是实现类似 GMail 舒适、舒适、紧凑的功能。

.run ...
$rootScope.settings = {
  displayDensity: 'cozy',
  navbarDensity: 'navbar-cozy',
  navbarNavDensity: 'navbar-nav-cozy',
  navbarBrandDensity: 'navbar-brand-cozy',
  navbarToggleDensity: 'navbar-toggle-cozy',
  faIconDensity: '',
  dropdownMenuDensity: 'dropdown-menu-cozy',
  dropdownHeaderDensity: 'dropdown-header-cozy'
};

.controller ...
$scope.$watch('settings.displayDensity', function() {
  $scope.settings.navbarDensity = 'navbar-' + $scope.settings.displayDensity;
  $scope.settings.navbarNavDensity = 'navbar-nav-' + $scope.settings.displayDensity;
  $scope.settings.navbarBrandDensity = 'navbar-brand-' + $scope.settings.displayDensity;
  $scope.settings.navbarToggleDensity = 'navbar-toggle-' + $scope.settings.displayDensity;
  $scope.settings.faIconDensity = 'fa-icon-' + $scope.settings.displayDensity;
  $scope.settings.dropdownMenuDensity = 'dropdown-menu-' + $scope.settings.displayDensity;
  $scope.settings.dropdownHeaderDensity = 'dropdown-header-' + $scope.settings.displayDensity;
});

下拉菜单舒适下面是 BS3 的默认值，下拉菜单舒适是我想在用户点击“舒适”时应用的新规则

dropdown-menu-cozy {
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
}

dropdown-menu-comfortable {
  padding: 10px 0 !important;
  margin: 4px 0 0 !important;
  font-size: 18px !important;
  /* font-size: inherit !important; */
}

这是来自 Chrome 开发工具的屏幕截图，显示了当我消除（即取消选中）我最终得到的 font-size、padding、margin 的值时，一切正常。 （取消选中会导致下拉菜单继承我在导航栏父级中成功更改的规则）我正在使用pestiside CSS调试库来获取图片中元素周围的那些行/框。

CSS 有点让我发疯！我是程序员宝宝！如果有人可以通过小 Plunker 看到一些更好的方法，将不胜感激。

也许 ng-class 存在一些我不知道的限制，或者在后来的 AJS 版本中进行了修复（由于 IE 项目限制，没有尝试过 1.3.x）

如果有人对这种舒适、舒适、紧凑的 BS3 操作感兴趣，我可以使用 Yeoman、Grunt、Bower 生成一个完整的 GitHub。

如果那里已经存在压缩或扩展 BS3 填充的 CSS 文件（项目），我肯定会对边距感兴趣！

Answer 1

简单但严重的错误：

您忘记了 css 中的 dot 指示类

全部替换

dropdown-menu-... {
   ...
}

与

.dropdown-menu-... {
    ...
}