부트 스트랩에 로고 추가하기 4 베타 navbar

Question

부트 스트랩 4 베타 프레임 워크의 navbar에 로고를 추가하고 싶습니다. 첫 번째 예에서 볼 수있는 것처럼 navbar의 높이는 로고가없는 정상 높이와 같거나 거의 같아야합니다. 여기 another question에서

예없이 로고

<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

솔루션은 단지 작업 부트 스트랩 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> 

당신은 내가 당신을 수동으로 당신이 필요로하는 무엇을 더 수정할 수 있습니다 인라인 스타일을 준 명확하게 볼 수있다.

여기에서 문제는 사용하는 이미지가 기본 크기로 표시되어 탐색 막대가 이미지를 미리 조정하여 이미지 크기를 미리 확보하여이를 방지 할 수 있다는 것입니다.

내가 도와주었습니다.