防止舊的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。