ブートストラップにロゴを追加する4 beta navbar

Question

ブートストラップ4ベータフレームワークのナビゲーションバーにロゴを追加します。 ナビゲーションバーの高さは、最初の例のように、ロゴのない通常の高さと同じか、ほぼ同じにする必要があります。ロゴ無しとを有する

例

<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> 

あなたは私はあなたが手動で何が必要で、さらに変更することができ、インラインスタイリングを与えはっきりと見ることができるように。

ここで問題となったのは、使用していた画像がデフォルトサイズで表示されていたため、ナビゲーションバーが変更前の画像のサイズを確保することでこれを回避できるということでした。

希望しました。