防止旧的css文件干扰bootstrap导航栏

Question

我有一个完成（旧）页面，现在我想添加一个启动导航栏。

第一步是在引导样式文件中设置一个包装器，以免打扰旧网站。 这是通过少做，工作很好。

但另一个问题是，旧网站的CSS文件干扰导航栏的CSS。

导航栏包含这样的：

<div id="navbar-wrapper"> 
    -- navbar -- 
</div> 

的bootstrap.less文件，如：

#navbar-wrapper { 
    -- all bootstrap things --- 
} 

jsFiddle demo

有没有办法阻止对方的css文件打扰navbar（改变旧的css或包括通过iframe的导航栏对我来说是没有解决办法的）

Answer 1

您有旧的CSS泄漏到您的新CSS中。从你的jsFiddle我可以看到，common.css的类定义了.dropdown，它也在Bootstrap的CSS中定义。这是打破你的布局。您需要重置或取消.dropdown的早期定义所定义的内容，以解决您遇到的显示问题。

例，按您的jsfiddle：

#mainNavbar .dropdown { 
    position: static; 
    left: auto; 
    top: auto; 
    z-index: auto; 
    border: 0; 
    border-radius: 0; 
    padding: 0; 
    margin: 0; 
} 

更新的jsfiddle：http://jsfiddle.net/ek7chqvu/2/

注： ID #mainNavbar如果 “复位” .dropdown类的定义不需要CSS的.dropdown类中定义后在common.css。