Twitter Bootstrap：將導航欄對齊div的底部

我正在建立一個網站，並且第一次使用twitter引導程序。Twitter Bootstrap：將導航欄對齊div的底部

我想對齊我的菜單到我的div的底部。但由於某種原因，我無法弄清楚如何去做。

我做了一些研究，並嘗試使用box-align屬性。但沒有工作。

這是我的代碼：

<div class="row"> 
<div class="col-md-4"> 
      <img class="img-responsive" src="img/logo.png" > 
     </div> 

     <div class="col-md-8"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</a></li> 
     </ul> 

     </div> <!-- nav tabs --> 

    </div> <!-- row -->

有什麼建議？

編輯：看來我沒有詳細說明我的問題，我的不好。目前我沒有使用CDN，菜單本身不會帶來任何問題。正如你可以在鏈接中看到的那樣，nav來自div的頂部，但我希望它在div的底部對齊。

來源

2014-03-12 Kickar

是否引導CDN的正常工作？檢查腳本和CSS鏈接是否已正確加載？ –

你的菜單似乎完全對齊在div中。你到底什麼意思？您希望導航項目不居中，但位於菜單底部？ – Sebsemillia

我沒有得到你想要的。 – Era

你必須給父元素一個特定的高度。我建議通過增加一個額外的課程來實現這一點，例如extraClass，您<div class="col-md-8">這樣的：

<div class="row"> 
<div class="col-md-4"> 
     <img class="img-responsive" src="img/logo.png" > 
    </div> 

    <div class="col-md-8 extraClass"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</a></li> 
    </ul> 

    </div> <!-- nav tabs --> 

</div> <!-- row -->

而且使用這個CSS：

.extraClass { 
    height: 122px; 
    position: relative; 
} 

.extraClass ul { 
    position: absolute; 
    bottom: 0; 
}

來源

2014-03-12 13:06:45 Sebsemillia

這對我有用！謝謝！ – Kickar

「position：absolute; bottom：0; width：100％;」爲我工作。謝謝。 – sharpshadow

謝謝sharpshadow。必須添加寬度：100％。 – Xipooo

-2

試試這個

<ul class="nav nav-tabs navbar-bottom">

來源

2014-03-12 13:34:38 Dextere

'navbar-bottom'從v3.3.2開始不是Bootstrap中的一個類 – jungos

Twitter Bootstrap：將導航欄對齊div的底部

回答

相關問題