Custom css不会覆盖Bootstrap CSS

Question

所以我使用bootstrap制作导航栏并使用他们的示例导航栏作为我的基础。 我摆弄了引导程序文件，以便导航栏以995px而不是768px折叠。现在因为我的导航栏按钮停留在左侧，直到窗口大小低于768px。 我发现如果我改变了

@media (min-width: 768px) {
    .navbar-header {
        float: left;
    }
}

到

@media (min-width: 995px) {
    .navbar-header {
        float: left;
    }
}

然后它运作正常。

但是我把

@media (min-width: 995px) {
    .navbar-header {
        float: left;
    }
}

进入custom.css并在bootstrap.css之后加载它并且没有发生任何变化。我的custom.css没有覆盖boostrap.css。我想不要改变bootstrap.css。

这就是导航栏现在的样子

它应该是这样的

Answer 1

因此，快速解决方法是将header #yourNewId { ... }添加到自定义样式。

解决此问题的另一种方法是使您的自定义样式更具体。我在谈论选择器。您应该为元素指定一个Id并在自定义样式中调用它。

这使您的自定义样式更具体，因此优先。您还可以通过在选择器中指示父级来增加特异性。

#yourNewId{ ... }＆gt; .navbar-header{ ... }＆gt; public static void main(String[] args){ String[] strings = new String[]{"module-src1","module-src2", "module-src3","source1","source2","source3"}; Arrays.sort(strings,new ModSrcComparator()); for(String s : strings) System.out.print(s+" "); System.out.println(); } private static class ModSrcComparator implements Comparator<String>{ @Override public int compare(String s1, String s2) { if(!s1.contains("-") && s2.contains("-")) return -1; else if(s1.contains("-") && !s2.contains("-")) return 1; return s1.compareTo(s2); } }

Answer 2

Always apply latest rule with equal specificity selectors. First, if not yet, place custom.css after bootstrap.css.

Then check media queries. If you just add

@media (min-width: 995px) {
    .navbar-header {
        float: left;
    }
}

to custom, it can't override it between 768 and 994 in bootstrap.

@media (min-width: 768px) {
    .navbar-header {
        float: left;
    }
}

Use something like it (change it to what you want):

@media (min-width: 768px) {
    .navbar-header {
        float: none;
    }
}
@media (min-width: 995px) {
    .navbar-header {
        float: left;
    }
}

Answer 3

The element is always floating left, so you won't be seeing any change. Never.