Bootstrap - 带有标签的顶部导航栏

Question

我想将表格结构合并到我的Bootstrap导航栏中。目前我有以下设置：

<div class="navbar navbar-inverse navbar-static-top"> 

     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <div class="navbar-brand"> 
      <i class="fa fa-cog"></i> Settings 
      </div> 
     </div> 
     <div class="container collapse navbar-collapse"> 
      <ul class="nav nav-tabs "> 
      <li><a href="#/menu1">MENU-ITEMS1</a></li> 
      <li><a href="#/menu2">MENU-ITEMS2</a></li> 
      <li><a href="#/menu3">MENU-ITEMS3</a></li> 
      <li><a href="#/menu4">MENU-ITEMS4</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 

我得到我的标签在顶部垂直对齐，但是我需要他们在我的导航栏的底部。

以下Bootply演示了此问题： http://www.bootply.com/ouKLqFBeqj

Answer 1

这里是一个Codepen你可以检查出http://codepen.io/noobskie/pen/rOVaKV

所有香港专业教育学院做结合，从我张贴在评论链接修复Twitter Bootstrap: Align nav-tabs to bottom of div

基本上所有你需要做的是将position:relative类添加到你的标签的父div，然后在你的标签列表中添加 position:absolute; bottom:0; 和你的情况我补充left:95因为你的导航栏链接