2016-08-05 35 views
0

Ich muss die Auffüllung der Nav-Links ändern, um den Hintergrund der letzten Link kleiner, aber wenn ich das tun, es vermasselt die Links-Ausrichtung und sie sind nicht zentriert vertikal im Nav mehr. Was verursacht das und wie arbeite ich daran?Ändern Bootstrap Nav-Links Padding ohne Unordnung Ausrichtung nach oben

HTML

<nav class="navbar navbar-inverse"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <img src="img/logo.png" class="navbar-brand" href="index.html"> 
      </div> 
      <div class="collapse navbar-collapse" id="nav"> 
       <ul class="nav navbar-nav navbar-left"> 
       <li><span class="fa fa-phone"> +62 202 555 0117</span></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#" class="active">Home</a></li> 
       <li><a href="#">About us</a></li> 
       <li><a href="#">Pricing</a></li> 
       <li><a href="#">Contact us</a></li> 
       <li><a href="#" class="nav-button">Get started</a></li> 
       </ul> 
      </div> 
      </div> 
     </nav> 

CSS

.container { 
    width: 1056px; 
} 
nav.navbar { 
    padding: 12px; 
    border-radius: 0; 
    background: url("../img/nav-bg.png"); 
} 
nav.navbar li { 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
nav.navbar li a { 
    padding: 6px 20px; 
} 
nav.navbar li a:link { 
    color: #9faeaf; 
} 
nav.navbar li a.active:link { 
    color: #fff; 
} 
.nav-button { 
    background: #6a7f7f; 
} 
nav.navbar a.nav-button:link { 
    color: #fff; 
} 
nav.navbar a.nav-button:hover { 
    background: #fff; 
    color: #366a6b; 
} 

Antwort

0

es Feste mit:

nav.navbar li a { 
    padding: 8px 20px; 
    margin-top: 0.5em; 
}