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規則

回答

相關問題