我正在建立一个网站,这是我第一次使用 Twitter 引导程序。
我正在尝试将菜单与 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,菜单本身不会出现任何问题。正如您在: link 中看到的,导航位于 div 的顶部,但我希望它与 div 的底部对齐。
您必须为父元素指定特定的高度。我建议通过添加一个额外的类来做到这一点,例如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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)