html - 自定义 CSS 不会覆盖 Bootstrap CSS

标签 html css twitter-bootstrap

有点奇怪的事情发生在这里......

我在 Visual Studio 2015 中使用 ASP.NET。当我在 <style> 中添加自定义 CSS 时在我的 HMTL 文档标题中添加标签,我的 CSS 将覆盖 Bootstrap 的 CSS,但是当我在外部 .css 文件中引用我的 CSS 时,它不会...这是我的代码(样式标签中的 CSS 与外部 css 表中有什么):

<head runat="server">
//BOOTSTRAP 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<%--<link rel="stylesheet" href="App_Code/MainStyleSheet.css" type="text/css" />--%> 
//UNCOMMENTING THIS WILL NOT OVERRIDE BOOTSTRAP CSS

<style>
    //THIS CSS WILL OVERRIDE BOOTSTRAP CSS
    .navbar {
        padding-top: 15px;
        padding-bottom: 15px;
        border: 0;
        border-radius: 0;
        margin-bottom: 0;
        font-size: 12px;
        letter-spacing: 5px;
        border-radius: 0px !important;
    }
</style>
</head>
<body>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">X.com</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Contract</a></li>
                    </ul>
                </div>
            </div>
        </nav>
</body>

在 Google 上搜索的所有解决方案都说将我的 .css 链接放在 Boostrap CSS 链接下方应该会覆盖它,但这就是我尝试过的方法,但它不起作用。有什么建议吗?

最佳答案

MainStyleSheet.css 文件移到 App_Code 文件夹之外。 App_Code 文件夹具有默认的Compile 构建操作,而不是Content

关于html - 自定义 CSS 不会覆盖 Bootstrap CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41527626/

相关文章:

html - 如何设置响应式 li 大小比为 2 :1 containing different sized images in grid

javascript - 原始图像损坏时显示默认图像

css - Youtube 视频作为具有最小宽度和最小高度的完整背景

css - 如何使 Bootstrap 列的高度相同?

css - Square 支付表单 CSS 问题

javascript - javascript 中的边框半径失败

jquery - 为产品定制界面加载图像的最佳实践

javascript - 如何在使用 CSS 滚动时平滑过渡和更改背景颜色?

javascript - Jquery 在 Bootstrap 中得到错误的 div 宽度

css - 如何垂直居中 bootstrap 3 行和列?