css - Bootstrap CSS 不会被自定义 css 覆盖

Question

所以我使用 bootstrap 制作导航栏，并使用他们的示例导航栏作为我的基础。 我摆弄了 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

所以快速修复是将 !important 添加到您的自定义样式。

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

这使您的自定义样式更加具体，因此具有优先权。您还可以通过在选择器中指明父项来提高特异性。

header #yourNewId { ... } > #yourNewId{ ... } > .navbar-header{ ... }