css - 为什么最后一个 Bootstrap 类没有生效？

Question

我有一个 article 标签，我有条件地应用了一个 css 类。这是我的 div，其中包含我的 ng-class 逻辑。

<article class="col-xs-12 col-sm-6" ng-class="{ 'col-sm-9': showRightNav === false }" id="tithSlip6">

如果我的右侧导航没有显示，那么我想增加文章的大小。它按应有的方式评估，但 css 没有生效。这是从我的开发工具中复制的 html:

<article class="col-xs-12 col-sm-6 col-sm-9" ng-class="{ 'col-sm-9': showRightNav === false}" id="tithSlip6"></article>

如图所示，添加了类，但页面上的样式保持不变。这可能是什么原因？

Answer 1

将被选择的 CSS 样式不依赖于 HTML 中 class 属性中类名的顺序，而是依赖于 CSS 中规则的顺序(及其特殊性)。

类 col-sm-6 和 col-sm-9 的特殊性相同，并且类的顺序在 Bootstrap 中(可能)不正确您正在使用的 CSS 文件。因此，您会看到 col-sm-6 即使在元素上应用了两个类时也会生效。

更惯用的方法(这也将解决问题)是仅使用元素上的两个类之一，以 showRightNav 为条件:

<article class="col-xs-12" 
         ng-class="{ 
           'col-sm-9': !showRightNav, 
           'col-sm-6': showRightNav 
           }" 
         id="tithSlip6">