Twitter Bootstrap：将导航标签对齐div的底部 [英] Twitter Bootstrap: Align nav-tabs to bottom of div

问题描述

我正在建立一个网站，并且第一次使用twitter bootstrap。

我正在尝试将菜单对齐到我的底部DIV。
但由于某种原因，我无法弄清楚如何去做。

我做了一些研究并尝试使用box-align属性。
但没有用。

这是我的代码：

 < div class =row> 
< div class =col-md-4> 
 < / div> 
 
< div class =col-md-8> 
< ul class =nav nav-tabs> 
< li class =active>< a href =＃>< span class =glyphicon glyphicon-homestyle =color：＃6d92a2>< / span>家庭及LT; / A>< /锂> 
< li>< a href =＃>< span class =glyphicon glyphicon-checkstyle =color：＃6d92a2>< / span> Missie en Visie< / a>< / li> 
< li>< a href =＃>< span class =glyphicon glyphicon-calendarstyle =color：＃6d92a2>< / span> Activiteiten< / A>< /锂> 
< li>< a href =＃>< span class =glyphicon glyphicon-userstyle =color：＃6d92a2>< / span> Lidmaatschap< / A>< /锂> 
< li>< a href =＃>< span class =glyphicon glyphicon-play-circlestyle =color：＃6d92a2>< / span> Videozone< / A>< /锂> 
< li>< a href =＃>< span class =glyphicon glyphicon-map-markerstyle =color：＃6d92a2>< / span>联系与LT; / A>< /锂> 
< / ul> 
 
< / div> <！ -  nav标签 - > 
 
< / div> <！ - 行 - > 
  

任何建议？

编辑：似乎我没有详细说明我的问题，我的不好。目前我没有使用CDN，菜单本身不会带来任何问题。正如你在链接中看到的那样，nav是在div的顶部，但我希望它在div的底部对齐。

解决方案 div>

你必须给父元素一个特定的高度。我建议通过增加一个额外的课程来实现这一点，例如 extraClass ，您的< div class =col-md-8> 像这样：

 < div class =row> 
< div class =col-md-4> 
 < / div> 
 
< div class =col-md-8 extraClass> 
< ul class =nav nav-tabs> 
< li class =active>< a href =＃>< span class =glyphicon glyphicon-homestyle =color：＃6d92a2>< / span>家庭及LT; / A>< /锂> 
< li>< a href =＃>< span class =glyphicon glyphicon-checkstyle =color：＃6d92a2>< / span> Missie en Visie< / a>< / li> 
< li>< a href =＃>< span class =glyphicon glyphicon-calendarstyle =color：＃6d92a2>< / span> Activiteiten< / A>< /锂> 
< li>< a href =＃>< span class =glyphicon glyphicon-userstyle =color：＃6d92a2>< / span> Lidmaatschap< / A>< /锂> 
< li>< a href =＃>< span class =glyphicon glyphicon-play-circlestyle =color：＃6d92a2>< / span> Videozone< / A>< /锂> 
< li>< a href =＃>< span class =glyphicon glyphicon-map-markerstyle =color：＃6d92a2>< / span>联系与LT; / A>< /锂> 
< / ul> 
 
< / div> <！ -  nav标签 - > 
 
< / div> <！ - 行 - > 
  

并使用这个CSS：

  .extraClass {
 height：122px; 
职位：亲属; 
} 
 
 .extraClass ul {
 position：absolute; 
 bottom：0; 
} 
  

I'm building a website, and for the first time i am using the twitter bootstrap.

I'm trying to align my menu to the bottom of my div. But for some reason i can't figure out how to do it.

I did some research and tried using the box-align property. but that didnt work.

This is my code:

<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 -->

Any advice?

EDIT: It seems I didn't specify my question enough, my bad. I'm not using the CDNs at the moment, the menu itself doesnt give any problems. As you can see in: link , the nav comes at the top of the div, but i want it aligned at the bottom of the div.

解决方案

You have to give the parent element a specific height. I would recommend doing this by adding an extra class, e.g. extraClass, to your <div class="col-md-8"> like this:

<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 -->

And the use this CSS:

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

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

这篇关于Twitter Bootstrap：将导航标签对齐div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！