將徽標添加到引導程序4 beta navbar

Question

我想在引導程序4 beta框架的導航欄中添加我的徽標。 導航欄的高度應與沒有標誌的普通高度相同或幾乎相同，如您在第一個示例中所見。

實施例不具有和具有標識

<nav class="navbar navbar-expand-md navbar-light" style="background-color: #CECFFF;"> 
     <a class="navbar-brand" href="/"><img src="logo.png"></a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbar"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item dropdown"> 
      .... 
      </li>   
     </ul> 
     </div> 
    </nav> 

https://codepen.io/anon/pen/gGpJLq

從another question解決方案在這裏僅用於自舉4阿爾法工作。

Answer 1

您可以指定圖像的高度，以確保它不會通過向img添加類來增加導航欄的大小。就像這樣：

.logo { 
    max-height: 40px; 
    padding: 0; 
} 

Answer 2

<a class="navbar-brand" href="/"> 
<img src="https://www.lern-online.net/bilder/logo.png" style="height: 35px; padding: 0 auto;"> 
</a> 

這裏，你可以清楚地看到我給了一個內嵌樣式，你可以手動進一步修改你所需要的。

這裏的問題是，您使用的圖像出現在其默認的大小，因此導航欄正在修改自己，以適應它，我們可以通過確保我們的圖像的大小，以避免這種情況。

希望我幫忙。