如何将引导程序3的导航栏对齐

Question

也许它看起来很简单，但它对我来说成了一个问题： 我需要将徽标和所有的li a元素对齐到底部并在一行上填充边距？

<!-- Fixed navbar --> 
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
     <img class="logo" alt=" logo" src="Logo.png" height="35" width="50" > 
     <span class="logo-text">logo text</span> 
     </a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right "> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li>    
     </ul> 

    </div><!--/.nav-collapse --> 
    </div> 
</div> 

Answer 1

.navbar-brand是导航栏内100％的高度，但是它填充了这样任何文本是中间对齐。当我需要在该元素，或与此有关的任何其他导航栏元素坚持的图像，我使用一个CSS background-image像这样：

.navbar-brand { 
    width: 170px; /* Your image width */ 
    background: url(../img/logo.png) center bottom no-repeat; 
} 

这使您对图像位置很好的控制。