Bootstrap CSS 未被自定义覆盖 css

Question

所以我正在使用 bootstrap 制作导航栏并使用他们的示例导航栏作为我的基础。我摆弄了 bootstrap 文件，使导航栏在 995px 而不是 768px 处折叠。现在因为我的导航栏按钮停留在左侧，直到 window 大小低于 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{ ... }

Answer 2

始终应用具有相同特异性选择器的最新规则。首先，如果还没有，请将 custom.css 放在 bootstrap.css.

之后

然后检查媒体查询。如果你只是添加

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

自定义，在bootstrap.

中不能覆盖768到994之间

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

使用类似的东西（将其更改为您想要的）：

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

Answer 3

该元素始终向左浮动，因此您不会看到任何变化。从来没有。

Bootstrap CSS 未被自定义覆盖 css

Bootstrap CSS isn't being overridden by Custom css

css

overriding

twitter-bootstrap

twitter-bootstrap-3