引導3標題導航欄中的CSS背景問題

這是我的jsFiddle。正如你所看到的，我使用Twitter Bootstrap 3來創建一個簡單的'標題'導航菜單。引導3標題導航欄中的CSS背景問題

有兩個問題：

爲標誌，我試圖用一個CSS背景而不是<img/>標籤，其要麼不渲染，或背景框/窗口太小而不能顯示實際的標誌;和
導航菜單太「高」;這意味着我希望它更短，並更緊密地「擁抱」菜單鏈接。您會注意到所有鏈接下面都有相當多的灰色，並且「登錄」鏈接需要與綠色「註冊」按鈕水平對齊。

根據徽標問題，您會注意到我試圖讓寬度更大（50％），但瀏覽器似乎沒有迴應。還值得一提的是，/images/mylogo.png是一個有效的URL，當我使用<img/>標記而不是<a>/CSS背景時，徽標顯示得很好。

％的導航菜單身高問題，我懷疑它可能有一些與此有關的部分：

<!-- But here I'm not explicitly setting the height and so perhaps TB3 is setting one for me...? --> 
<div id="navbar" class="navbar-collapse collapse"> 
    ... 
</div>

但我不能告訴是肯定的。有人看到我要去哪裏？

來源

2015-12-21 smeeb

使用本：

<nav class="navbar navbar-default header-height"> 
    <div class="container-fluid header-height"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

，然後寫CSS中使用其他文件和附加到HTML文件

.header-height { 
    height: 30px; 
} 

.navbar-brand { 
    background: url(...); 
    background-size: 50%; 
    padding: ??; /* padding for vertical align */ 
}

來源

2015-12-21 19:36:44

去http://www.w3schools.com/bootstrap/bootstrap_navbar。 asp –

Thanks @Mahdy Aslamy（+1） - 今晚我會看看這個，並會回饋給你。你有什麼機會可以解釋你所做的事情以及它爲什麼起作用的30,000英尺的視角？也只是要清楚，我只想讓徽標顯示在頁眉/導航欄的左上角，而不是一個跨越整個導航欄的「背景圖像」。 – smeeb

謝謝，（我不太瞭解英語）我只是爲div設置一個背景作爲品牌形象，並設置大小以減小圖像大小以正確設置標題的高度，然後您可以更改。如果這是重複設置背景重複：不重複; –

引導3標題導航欄中的CSS背景問題

回答

相關問題