AngularJS ng-class不能覆盖Bootstrap下拉CSS规则

使用AngularJS-1.2.26指令ng-class，我试图覆盖下拉菜单& dropdown-header的Bootstrap 3.2 CSS规则，但是我的新的font-size，padding，保证金不会影响html显示。AngularJS ng-class不能覆盖Bootstrap下拉CSS规则

我使用AJS1.2.26纳克级的成功覆盖等使用AJS技术，如（BS3基类）导航栏品牌，导航栏，导航如下：

<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点击上面的齿轮图标（例如，设置）之间舒适温馨，紧凑型及导航栏切换将发生变化，但相关的下拉不会。

变量displayDensity，navbarBrandDensity，navbarNavDensity在MainController的.run中初始化，并在.controller中设置$ watch。基本的想法是植入类似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开发工具的屏幕截图，它显示了何时消除（即，取消选中）字体大小，填充和边距的值，然后事情看起来没问题。（取消检查导致下拉继承规则，我已经在navbar父母中成功更改）我正在使用pestiside CSS调试库来获取图片中元素周围的那些行/框。

Chrome tools allows eliminating the offending rules CSS让我疯狂！我是一名程序员宝贝！如果任何人都可以通过小布卢克看看，并看到一些更好的方法，将不胜感激。

也许有对纳克级的限制，我不知道的或修复了AJS以后varsions（没试过，因为IE项目限制的1.3.x）

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

如果现有的CSS文件（项目）有Compact或Expand BS3填充，我肯定会对此感兴趣！

来源

2014-10-12 Brad Sturtevant

很好的细节问题取代，我高兴地搜索您的问题:) – yunandtidus 2014-10-12 09:30:09

简单，但讨厌的错误：

你忘了你的CSS显示类

的dot只是所有

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

与

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

来源

2014-10-12 09:29:39 yunandtidus

谢谢！这是'星期六晚上，所以我想这是正常'Damb点！（例如，很重要的事情） – 2014-10-12 11:37:41

AngularJS ng-class不能覆盖Bootstrap下拉CSS规则

回答

相关问题