Bootstrap固定導航鏈接正在改變對齊方式

Question

這是用於BigCommerce網站。我添加了一個包含鏈接和跨度和div的引導固定導航欄。不知道我是否正確設置了CSS，但一切似乎都完全正常，直到我點擊其中一個鏈接...這是一個Global Big Commerce登錄/註銷鏈接。最初它顯示爲兩個鏈接：「登錄」或「創建帳戶」，並且它們正確對齊，沒有問題。當有人點擊其中一個並簽入按鈕時，就會更改爲「註銷」。當它更改爲註銷時，它會稍微增加一點，並且不再正確對齊。見下面的截圖。

%%GLOBAL_OptimizerLinkScript%% 
<link rel="stylesheet" type="text/css" href="%%GLOBAL_AppPath%%/javascript/jquery/themes/cupertino/ui.all.css?%%GLOBAL_JSCacheToken%%" /> 
    <div id="TopMenu" class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 

       <ul class="nav"> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#GiftsByType">Gifts By Type<span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="GiftsByType"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/wine-gifts/" title="View Wine Gifts">Wine Gifts</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/tea-gifts/" title="View Tea Gifts">Tea Gifts</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/gourmet-gifts/" title="View Gourmet Gifts">Gourmet Gifts</a></li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/spa-baskets/" title="View Spa Baskets">Spa Baskets</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/corporate/" title="View Corporate">Corporate</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/chocolate-lovers/" title="View Chocolate Lovers">Chocolate Lovers</a></li> 
          </ul> 
        </li> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#Occasions">Occasions<span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="Occassions"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/4th-of-july/" title="View 4th of July Gifts">4th of July</a></li> 
         </ul> 
        </li> 
        <li><a href="/">&nbsp;Home&nbsp;</a></li> 
      </ul>  



      <ul class="nav" style="float: right;">    
       <div class="pull-right"> 
        %%Panel.HeaderSearch%% 
       </div> 
       <span>%%GLOBAL_LoginOrLogoutText%%</span> 
       <li><a href="%%GLOBAL_ShopPath%%/account.php">%%LNG_YourAccount%%</a></li>     



        <li class="CartLink" style="display:%%GLOBAL_HideCartOptions%%"> 
      <span><a href="%%GLOBAL_ShopPathNormal%%/cart.php" title="%%LNG_ViewCart%%"><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 15px; right: 35px;"></i><span class="badge badge-info" style="position: relative; top: 19px; right: 30px;">0</span></span></a> 
       </li>    
      </ul> 
     </div> 
     </div> 
    </div> 

CSS：

.navbar-fixed-top .navbar-inner, 
.navbar-fixed-bottom .navbar-inner { 
    padding-left: 0; 
    padding-right: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
} 
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container { 
    width: 940px; 
} 
.navbar-fixed-top { 
    top: 0; 
} 
.navbar-fixed-bottom { 
    bottom: 0; 
} 
.navbar .nav { 
    position: relative; 
    left: 0; 
    display: block; 
    float: left; 
    margin: 0 10px 0 0; 
} 
.navbar .nav.pull-right { 
    float: right; 
}  
.navbar .nav > li { 
    float: right; 
    margin-top: 0px; 
} 
.navbar .nav > li > a { 
    float: none; 
    vertical-align: middle; 
    padding: 20px 15px 20px; 
    color: #7d7d7d; 
    font-family: 'Lora', serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    text-decoration: none; 
    /*text-shadow: 0 1px 0 #ffffff;*/ 
} 
.navbar .nav > li > a:hover { 
    background-color: #e0e0e0; 
    color: #888888; 
    text-decoration: none; 
} 
.navbar .nav > li > a:focus, 
.navbar .nav > li > a:hover { 
background-color: #e0e0e0; 
    color: #888888; 
    text-decoration: none; 
} 
.navbar .nav > span { 
color: #7d7d7d; 
    float: right; 
    margin-top: 19px; 
    display: inline; 

} 
.navbar .nav > span > a { 
    float: none; 
    vertical-align: middle; 
    padding: 20px 7px 20px 7px; 
    color: #7d7d7d; 
    font-family: 'Lora', serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    text-decoration: none; 
/* text-shadow: 0 1px 0 #ffffff; */ 
} 
.navbar .nav > a { 
    float: right; 
    margin-top: 18px; 

} 
.navbar .nav > a { 
    float: none; 
    vertical-align: middle; 
    padding: 20px 8px 20px 8px; 
    color: #7d7d7d; 
    font-family: 'Lora', serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    text-decoration: none; 
/* text-shadow: 0 1px 0 #ffffff; */ 
} 
.navbar .nav > span > a:focus, 
.navbar .nav > span > a:hover { 
    background-color: #e0e0e0; 
    color: #888888; 
    text-decoration: none; 
} 

Answer 1

看來我已經想通了這一點我自己......雖然可能不是一個合法的更多的是 「變通」固定。

更改了CSS中受影響跨度的某些對齊方式。變化垂直對齊從中間向底部增加了一個邊距爲.navbar .nav>的20像素跨度：

.navbar .nav > span { 
    color: #ffffff; 
    float: left; 
    margin-top: 20px; 
    display: inline; 
    } 

.navbar .nav > span > a { 
    float: none; 
    vertical-align: bottom; 
    padding: 20px 7px 20px 7px; 
    color: #7d7d7d; 
    font-family: 'Lora', serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    text-decoration: none; 
    /* text-shadow: 0 1px 0 #ffffff; */ 

}