自定義CSS不會覆蓋Bootstrap CSS

Question

這里發生一種奇怪的事情...

我在Visual Studio 2015中使用ASP.NET。當我在HMTL文檔標題的<style>標記內添加自定義CSS時，我的CSS將覆蓋Bootstrap的CSS，但是當我在外部.css文件中引用我的CSS時它沒有...這是我的代碼（style標記中的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鏈接的下面應該會覆蓋它，但這是我已經嘗試過的方法，並且不起作用。 有什么建議么？

Answer 1

將MainStyleSheet.css文件MainStyleSheet.css App_Code文件夾之外。 App_Code文件夾具有默認的Compile構建操作，而不是Content 。

Answer 2

嘗試將html代碼包裝在div中，並為其提供一個類/ id，然后嘗試使用該包裝的div覆蓋。

HTML：

<div class="wrapping_class">    
    <nav class="navbar navbar-default">

    </nav>
</div>

CSS：

.wrapping_class .navbar.navbar-default{
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 5px;
    border-radius: 0px !important;
}

這是一個基於CSS特定性的解決方案，在基於某些CSS規則的功能來覆蓋某些CSS規則方面發揮着作用。

請參閱此鏈接以獲取表中的特異性值（對於“星球大戰”粉絲來說是一種享受）： https : //www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

自定義CSS不會覆蓋Bootstrap CSS

問題描述

2 個解決方案

解決方案1
1 已采納 2017-01-07 23:51:49

解決方案2
0 2017-01-07 23:50:07

自定義CSS不會覆蓋Bootstrap CSS

問題描述

2 個解決方案

解決方案1 1 已采納 2017-01-07 23:51:49

解決方案2 0 2017-01-07 23:50:07

解決方案1
1 已采納 2017-01-07 23:51:49

解決方案2
0 2017-01-07 23:50:07