Bootstrap導航欄品牌標誌 - 肖像圖像已被切斷？

繼page之後，使用圖片徽標代替導航品牌的文字，我遇到了這個問題，肖像標誌被任何內容/文字/圖片/ carousal切斷。Bootstrap導航欄品牌標誌 - 肖像圖像已被切斷？

我該如何解決？

<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#"> 
     <img src="http://placehold.it/150x200&text=Logo" alt=""> 
    </a> 
</div>

結果：

來源

2016-06-09 laukok

增加.navbar-header的高度。 –

我需要更多關於照片的細節。你能發佈完整的HTML和CSS嗎？ –

嘗試添加的z-index到您的導航欄，像這樣在你的CSS文件，因爲它看起來像你的前景圖像重疊它

.navbar-header { 
    z-index: 100; 

}

來源

2016-06-09 17:18:16

然後，導航將在圖像上。導航不固定，所以沒有意義。 –

@LeonLaci問題在於，一旦應用了z-index，圖像目前就隱藏在旋轉木馬後面，您將看到該圖像完整顯示，之後他們需要重新調整導航欄以使其看起來乾淨整潔導航欄不固定的事實意味着一旦滾動視線不見，圖像也會如此。但是具有這種高度的導航將完全不合適 –

向img添加最大高度。

max-height: 100%; 
height: 100%; 
width: auto;

來源

2016-06-09 17:24:06

Bootstrap導航欄品牌標誌 - 肖像圖像已被切斷？

回答

相關問題