如何克服Bootstrap的默認樣式？元素定位問題？

我一直在Bootstrap中重建我的網站，以便快速構建原型，同時我自己設計一些更強大的功能。當涉及到覆蓋默認樣式時，它已經證明了更多的麻煩。如何克服Bootstrap的默認樣式？元素定位問題？

該網站是here，如果你需要它的參考。

我試圖讓「主頁」鏈接的背景顏色爲白色。我成功地設計了其他navbar鏈接。

下面是我用的目標CSS類型的例子（我不認爲這裏有問題）：

.white-back, #home { 
    background-color: white; 
}

HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active" id="home"><a href="http://kennethfrancis.com">Home</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

我試圖把li.active以及a上的ID。當我將li.active > a的背景顏色設置爲白色時，它不起作用。我甚至嘗試使用!important。有什麼我在這裏失蹤？我根據Firebug的檢查員說過的東西是什麼攻擊了幾種不同的方法。

現在，看着這一切剝離出來，讓我覺得好像我已經瘋了嵌套。我可以將其中的任何一個去掉並保持頁面的結構嗎？

如果有人可以在任何關於如何克服這種元素定位/壓倒性問題的鏈接中折騰，那將是非常棒的。任何相關的東西。

來源

2014-01-07 kfrncs

如果你正在使用類，那麼你需要確保你的CSS更具體的應用。所以li.active a將無法正常工作，因爲它會被缺省的Bootstrap類覆蓋，因爲它比你的樣式更具體。

你需要的目標，如下面的代碼，它的工作

.navbar-default .navbar-nav>.active>a { 
    background: #fff; 
}

在你正在使用的ID #home爲li話，那麼你可以使用

#home a { 
    background: #fff; 
}

希望這有助於

來源

2014-01-07 06:46:38 anpsmn

我已將您的網頁下載到您的style.css中，只需放置此課程：

.navbar-default.navbar-fixed-top .nav > li.active > a { 
    background: white !important; 
}

來源

2014-01-07 07:10:50 hsobhy

如何克服Bootstrap的默認樣式？元素定位問題？

回答

相關問題