Bootstrap自定義CSS特異性不覆蓋品牌形象

好吧，所以我是初學者，但在這種情況下我讀了一個體面的數字。但我正在嘗試將我的品牌形象放入導航欄中。Bootstrap自定義CSS特異性不覆蓋品牌形象

我知道這將是愚蠢和小事。我總是可以覆蓋HTML中的樣式，但我更喜歡在自定義CSS文件中完成它。

第一件事是第一件事情，明顯地避開它。我的自定義CSS文件是頭部聲明的最後一個CSS文件。我能夠修改頁面上的其他元素，比如段落元素的顏色，所以我知道CSS文件鏈接正確。我明白特異性，至少是它的核心概念。

嘗試解決特定性問題。我第一次做了一個自定義ID爲我左右的時間內，我宣佈標識，在我的CSS文件，我寫

#logo { 
    height: 110%; 
}

沒有。所以我嘗試更具體，並添加可能指向徽標文件的每一個類聲明。

#logo .nav .navbar .navbar-inverse .navbar-fixed-top .navbar-brand { 
... 
}

再次沒有運氣。我嘗試了.navbar品牌和每一個類的組合。我只是不理解層次結構，誰在優先考慮。我的CSS文件，如果在頭文件中最後列出，並帶有正確指定的類聲明，應覆蓋任何引導程序的代碼。

我知道這個問題必須要問很多，但經過幾個小時尋找答案，我沒有找到它的任何地方。部分

<div class="navbar-header"> 
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a href="#" class="navbar-brand"> 
     <img id="logo" src="images/logo.png" alt="Limit Magazine"> 
    </a> 
</div>

來源

2015-03-25 Kaze9

你可以發佈html代碼片段，只有一個孩子上面的標誌容器就足夠了。 – blushrt 2015-03-25 07:32:32

@blushrt我將它添加到帖子中，唯一較大的div是打開導航部分的那個

事情的

HTML代碼段是您指定的百分比高度，這就要求高，難以定義的父元素。在Bootstrap 3中，.navbar-brand的父元素爲div.navbar-header，它沒有定義的高度。由於這個原因height: 110%;不起作用。因此，您需要以像素爲單位定義徽標的高度或以百分比定義它，並定義以像素爲單位的高度。

來源

2015-03-25 07:41:30

謝謝你這樣做解決這個問題。我在我的檢查員注意到.navbar品牌有一個50px的集合高度，但整條線穿過它。這是否意味着.navbar品牌的CSS規則由於其他原因而被忽略。 – Kaze9 2015-03-25 07:47:46

隨時歡迎您！請隨時將我的答案標記爲已接受:)這意味着這些CSS規則會被其他地方覆蓋。它可能是同一個CSS文件或不同的文件。 – 2015-03-25 07:53:50

啊，好的，再次感謝你。 – Kaze9 2015-03-25 07:59:19

Bootstrap自定義CSS特異性不覆蓋品牌形象

回答

相關問題