Question

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

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

如果我的右侧导航没有显示，那么我想增加article的大小。它会按照它应该进行评估，但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">

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

1 个答案: