將Initializr模板中的導航按鈕對齊導航欄底部

我正在基於Initializr引導模板的網站。左上角不是「項目名稱」，而是使用圖像。導航鏈接仍然對齊到頁面的頂部，但我想他們在黑色導航欄的底部：將Initializr模板中的導航按鈕對齊導航欄底部

Initializr Bootstrap template navigation

要重現最簡單的就是下載引導模板，並更改「項目名稱」在導航欄到：

<a class="brand" href="#"><img src="apple-touch-icon-114x114-precomposed.png" /></a>

我不能爲我的生命得到的鏈接，在導航欄的底部對齊，除非通過設置.navbar .nav風格bootstrap.css（.min.css的）頂邊距約90px。然而，這種（基於像素的）解決方案似乎是一種錯誤的方法。

我試過玩弄position: relative; bottom: 0和vertical-align: bottom但無濟於事。這些模板中的CSS數量也無濟於事（尤其對於像我這樣的開發人員而非設計人員）。

任何人都可以得到鏈接整齊地對齊導航欄的底部？

來源

2012-10-20 Peter

如果開溝Initializr（太厲害了我需要的東西），並用以下結構固定它自己：

<div id="container"> 
    <div class="navbar"> 
     <a href="index.html" class="logo"> 
      <img src="img/logo.png" /> 
     </a> 
     <div class="nav"> 
      <ul> 
       <li><a href="page1.html">Page 1</a></li> 
       <li><a href="page2.html">Page 2</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="clear"></div> 
    <div class="content"> 
     Content here 
    </div> 
</div>

下面CSS：

#container { width: 1170px; margin: 0 auto; } 
.navbar, .content { font-size: 1.6em; } 
.navbar .logo { float: left; } 
div.nav ul { list-style: none;padding: 0;} 
div.nav ul li { display: inline;} 
div.nav ul li a { display: block; background-image: url('../img/linksBackground.png'); background-position: 0 80px; background-repeat: no-repeat; 
margin-top: 115px; float: left; padding: 11px 30px 9px 30px; text-decoration: none; color: #5dd2ff; } 
div.nav ul li a:hover {color: #fff; background-position: 0 160px; background-color: #95e2ff;} 
div.nav ul li.active a { color: #fff;font-weight: bold; background-position: left top; background-color: #5dd2ff;} 

.clear { clear: both; }

來源

2013-01-21 09:52:42 Peter

將Initializr模板中的導航按鈕對齊導航欄底部

回答

相關問題