在引導程序3中將導航欄圖標與文本對齊？

Question

我使用的引導3.這裏是我的html：

正如你所看到的，star和BookMarks文本是不能與其他的資產淨值條線。 如何解決這個問題？ 這裏是我的代碼

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 


      <li> 
       <a href="/mybookmarks/"> 
       <span class="glyphicon glyphicon-star" id="starry"></span> 
       &nbsp;BookMarks 
       </a> 
      </li> 

      <li> 
       <a href="/search/create/"> 
       <span class="glyphicon glyphicon-plus"></span> 
       &nbsp;New Search 
       </a> 
      </li> 

      <li> 
       <a href="/dashboard/"> 
       <span class="glyphicon glyphicon-th"></span> 
       &nbsp;Searches 
       </a> 
      </li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       <span class="glyphicon glyphicon-stats"></span> 
       &nbsp;Reports <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
       <li> 
        <a href="implement this">Raw Data</a> 
       </li> 
       <li> 
        <a href="implement this">Graphs</a> 
       </li> 
       <li class="divider"></li> 
       <li> 
        <a href="implement this">Email Report</a> 
       </li> 
       </ul> 
      </li> 

      <li class="dropdown active"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       <span class="glyphicon glyphicon-user"></span> 
       &nbsp; 
         demo <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
       <li> 
        <a href="/accounts/settings/">Account Settings</a> 
       </li> 
       <li> 
        <a href="/accounts/password/change/">Change Password</a> 
       </li> 
       <li class="divider"></li> 
       <li> 
        <a href="help">Help</a> 
       </li> 
       <li class="divider"></li> 
       <li> 
        <a href="/logout/">Log Out</a> 
       </li> 
       </ul> 
      </li> 

      </ul> 
     </div> 
     <!-- /.navbar-collapse --> </div> 
     <!-- /.container --> </nav> 

和一個自定義CSS這是該問題是由在一個圖標的字體大小增加所致明星glyphicon

#starry { 
color: #B939A0; 
font-size: 20px; 
} 

Answer 1

的span元素。解決這個

一種方法是：

#starry { 
    color: #B939A0; 
    font-size: 20px; 
    float: left; 
    margin: -2px 3px 0 0; 
} 

浮動就拿了公文流轉，使文本重新調整。然後邊距重新定位圖標。

Demo