ロゴはnavbarに適合しません

Question

私はnavbarとfooterを構築するためにブートストラップの方法に従っていますが、navbarにいくつかの問題があります。左側の頭にNavbarの中に私のロゴであるイメージを置きたいロゴは列に収まらない。どうしてか分かりません。ここ

は私のコードです：

<header> 
    <nav class="navbar navbar-default"> 
     <ul class="nav navbar-nav navbar-left"> 
      <a href="/" class="navbar-brand"><img src="img/logo1.png" class="img img-responsive" alt=""></a> 
      <li><a href="/">Home</a></li> 
      <li><a href="/about">About</a></li> 
      <li><a href="/contact">Contact</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="/Register">Register</a></li> 
      <li><a href="/Login">Login</a></li> 
     </ul> 
    </nav> 
</header> 

画像：

私はこのCSSを追加しようとしました：

.navbar-brand 
{ 
    margin: 0; 
    padding: 0; 
} 

.navbar-brand img 
{ 
    max-height: 100%; 
} 

しかし、私のイメージが小さくなる、イメージのサイズを増やしたい場合は、イメージを伸ばしたい、私はちょうどイメージをサイズ比を維持し、navbarの左側に合うようにしたい、何が間違っている？

bootply

Answer 1

入れnavbar-brand外navbar-nav

<header> 
    <nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img src="img/logo1.png" class="img img-responsive" alt=""> 
     </a> 
    </div> 
    <ul class="nav navbar-nav navbar-left"> 
     <li><a href="/">Home</a></li> 
     <li><a href="/about">About</a></li> 
     <li><a href="/contact">Contact</a></li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="/Register">Register</a></li> 
     <li><a href="/Login">Login</a></li> 
    </ul> 
    </nav> 
</header> 

More Info

Answer 2

のあなたはこれを試すことができます。..

.navbar-brand 
{ 
    padding-left:20px; 
    z-index:999; 
    position:relative; 
}