Logo passt nicht in bootstrap navbar

Question

Ich versuche, das Bild in meiner Navigation zu einer größeren Größe zu ändern.

Allerdings ist die Navbar dadurch verformt.

Ich habe den Code hier: http://www.bootply.com/941lMP3fj6#

Das Problem könnte sein, dass das Bild in einem Anker-Tag ist. Aber nicht sicher.

Answer 1

Versuchen:

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

Arbeits: http://www.bootply.com/cCg5FvZyZP

Answer 2

Fügen Sie diese auf Ihre Stile:

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

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

http://www.bootply.com/rAzwwIbCBI

Answer 3

<div class="container"> 
       <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <div class="navbar navbar-collapse collapse navbar-responsive-collapse"> 
        <div class="pull-left" style="margin-right: 15px;"> 
         <a rel="home" href="/" title="www.site.nl"> 

        <img src="//placehold.it/200x51"> 
       </a> 
        </div> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a href="">Home</a></li> 
         <li><a href="">About</a></li> 
         <li><a href="">Link 1</a></li> 
         <li><a href="">Link 2</a></li> 
        </ul> <!-- end nav--> 
        <ul class="nav navbar-nav pull-right"> 
         <li class="dropdown"> 
          <a href="" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong> Select language</a> 
          <ul class="dropdown-menu dropdown-menu-right"> 
           <li><a href="">NL</a></li> 
           <li><a href="">IL</a></li> 
           <li><a href="">ENG</a></li> 
          </ul> 
         </li> 
        </ul> <!-- end nav menu right --> 
       </div> <!-- end nav-collapse --> 

      </div> 

Setzen Sie Ihr Logo im Inneren th e Behälter.

Der obige Code funktioniert !!

Überprüfen Sie und lassen Sie mich wissen, wenn Sie irgendwelche Probleme haben !!

Answer 4

Sie müssen die Höhe der Navigationsleiste anpassen.

können Sie diese Variable in weniger verwenden, um die Höhe zu justieren und es wird die navbar vertikal und umfassen alle notwendigen Polsterung Zentrum:

@navbar-height 

50px ist die Standardeinstellung.

Wie dies in regelmäßiger CSS anzupassen, ist die min-height von .navbar und die Höhe der navbar-fixed-top und stellen Sie dann padding von .navbar-nav zu ändern. Diese

ist, wie der obere Teil strukturiert sein sollte (fehlende navbar-Header):

<div class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
       <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" rel="home" href="/" title="www.site.nl">       
        <img src="//placehold.it/200x51"> 
       </a> 
       </div> 

Beispiel Bootply: http://www.bootply.com/tOoeM8o8Om