html - 防止旧的 css 文件干扰 Bootstrap 导航栏

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/

注意:如果在 之后定义了“reset” .dropdown 类，则不需要 CSS id #mainNavbar。 common.css 中定义的 dropdown 类。