自定义CSS不重写引导CSS

类这里发生一个奇怪的事情......自定义CSS不重写引导CSS

我在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>

在谷歌的决议所有搜索说，把自举CSS链接下面我的.css链接应该覆盖它，但是这就是我试过，我不工作。有什么建议么？

来源

2017-01-07 Shn_Android_Dev

假设样式表位于您指定的目录中，那么基于上面的代码，自定义CSS中的样式声明将覆盖引导中的任何样式声明。为了提供帮助，我们需要查看您观察到的未被覆盖的给定规则的具体示例。 –

显示您的[MVCE]（http://stackoverflow.com/help/mcve）。 – dippas

@dippas更新了它。这有帮助吗？ –

移动你的MainStyleSheet.css文件的App_Code文件夹之外。 App_Code文件夹有默认编译构建操作而不是内容。

来源

2017-01-07 23:51:49

这是解决方案。谢谢！ –

尝试和包装你的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规则作用的解决方案。

参考此链接为特异性值的表（对于星战迷请客）： https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

来源

2017-01-07 23:50:07

自定义CSS不重写引导CSS

回答

相关问题