Ajout de logo à bootstrap 4 beta navbar

Question

Je veux ajouter mon logo dans la barre de navigation dans le cadre de bootstrap 4 beta. La hauteur de la barre de navigation doit être la même ou presque la même que la hauteur normale sans logo, comme vous pouvez le voir dans le premier exemple.

Exemple avec et sans logo

<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

Les solutions de another question ici sont seulement pour bootstrap 4 alpha travail.

Answer 1

Vous pouvez spécifier la hauteur de l'image pour vous assurer qu'elle n'augmente pas la taille de la barre de navigation en ajoutant une classe au img. Comme ceci:

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

ici que vous pouvez voir clairement que j'ai donné un style en ligne que vous pouvez modifier manuellement plus sur ce que vous avez besoin. Le problème ici était que l'image que vous utilisiez apparaissait dans sa taille par défaut d'où la barre de navigation se modifiait pour l'accommoder nous pouvons l'éviter en assurant la taille de notre image d'avance.

J'espère avoir aidé.