Il logo non si adatta alla barra di navigazione bootstrap

Question

Sto tentando di modificare l'immagine nella mia navigazione verso una dimensione maggiore.

Tuttavia in questo modo la barra di navigazione non è corretta.

Ho il codice qui: http://www.bootply.com/941lMP3fj6#

Il problema potrebbe essere che l'immagine è in un tag di ancoraggio. Ma non sono sicuro.

Answer 1

Prova:

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

di lavoro: http://www.bootply.com/cCg5FvZyZP

Answer 2

Aggiungi questo ai vostri stili:

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

mettere il vostro marchio all'interno th e contenitore.

Il codice sopra funziona !!

Controlla e fammi sapere se hai problemi !!

Answer 4

È necessario regolare l'altezza della barra di navigazione.

È possibile utilizzare questa variabile in meno per regolare l'altezza e sarà centrare la barra di navigazione verticale e includere tutte le imbottiture necessarie:

@navbar-height 

50px è l'impostazione predefinita.

Come regolare questo in una regolare CSS è quello di cambiare il min-height del .navbar e l'altezza del navbar-fixed-top e quindi regolare imbottitura di .navbar-nav.

Questo è come la parte superiore deve essere strutturato (manca 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> 

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