Question

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

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

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

导航栏包含如下：

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

bootstrap.less文件，如：

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

jsFiddle demo

有没有办法防止其他css文件干扰导航栏（更改旧的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/

注意：如果在#mainNavbar中定义的.dropdown类之后定义了“重置”.dropdown类，则不需要CSS标识common.css }。

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

1 个答案: