ASP MVC无法覆盖bootstrap css

时间:2017-05-18 09:54:19

标签: html css asp.net-mvc twitter-bootstrap twitter-bootstrap-3

我已经尝试过使用以下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;
    }
}

enter image description here

这是我认为的正确顺序,但它在任何时候都不起作用。

1 个答案:

答案 0 :(得分:1)

  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">
    
  2. 对于某些规则,您需要使用!important

  3. 还尝试将任何查询字符串添加到CSS文件URL以避免 сaching问题,例如:

    <link rel="stylesheet" href="mytheme.css?version=new">