我已经尝试过使用以下navbar css覆盖bootstrap css。每次我尝试加载CSS时,我甚至无法在浏览器中看到任何内容
.navbar-default {
background-color: #205ba2;
border-color: #2d74ca;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #dce9f8;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #dce9f8;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #dce9f8;
background-color: #2d74ca;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #dce9f8;
background-color: #2d74ca;
}
.navbar-default .navbar-toggle {
border-color: #2d74ca;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #2d74ca;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #dce9f8;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #dce9f8;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #dce9f8;
background-color: #2d74ca;
}
}
这是我认为的正确顺序,但它在任何时候都不起作用。
答案 0 :(得分:1)
您需要在链接后将您的CSS链接包含在页面中 引导。例如:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="mytheme.css">
对于某些规则,您需要使用!important。
还尝试将任何查询字符串添加到CSS文件URL以避免 сaching问题,例如:
<link rel="stylesheet" href="mytheme.css?version=new">