调整Bootstrap Navbar中的链接突出显示区域

Question

我使用Twitter Bootstrap在我的页面中心创建了一个导航栏。我已经在中间安排了三个图标，它们之间有一段距离。当我将鼠标悬停在其中一个上时，文本不在突出显示部分的中心。它看起来如下。我希望Home或Tags完全位于突出显示部分的中心。

这是我的一小段相关代码。

.navbar .nav > li > a 
{
 float: none ;
 padding: 10px 100px 8px 0px ;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}


.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover 
{
  color: silver ;
  text-decoration: none ;
  background-color:ThreeDFace  #444 ;   
}

Answer 1

希望这可以帮到你!!

更改此CSS样式

.navbar .nav > li > a 
{
 float: none ;
 padding: 10px 100px 8px 0px ;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}

到这个

.navbar .nav > li > a 
{
 float: none ;
 width: 100px; 
 text-align: center;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}

和完成：）