html - 推特 Bootstrap : Align nav-tabs to bottom of div

Question

我正在建立一个网站，这是我第一次使用 Twitter Bootstrap 。

我试图将我的菜单与我的 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，菜单本身没有任何问题。正如您在链接中看到的那样，导航位于 div 的顶部，但我希望它与 div 的底部对齐。

Answer 1

你必须给父元素一个特定的高度。我建议通过添加一个额外的类来做到这一点，例如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;
}