如何在Bootstrap 2.0中垂直对齐导航栏项目

Question

我在Boostrap 2.0的导航栏中垂直导航元素的垂直居中有困难。现在，所有元素都被刷新到导航栏的顶部。我该如何解决？

我也很难保持徽标和导航栏与页面边界对齐。如果您注意到，品牌和导航栏会浮动到浏览器页面的边缘。我该如何解决？

我想要的导航栏/头有这样的布局：

http://www.fleetio.com/

这里是我的尝试，使用加看到代码： http://jsfiddle.net/tYVcY/36/embedded/result/

Answer 1

的方式Fleetio处理垂直对齐问题是修改.navbar .nav > li > a选择器上的填充。

标准自举：

.navbar .nav > li > a { 
    float: none; 
    padding: 10px 15px 10px; 
    color: #777; 
    text-decoration: none; 
    text-shadow: 0 1px 0 white; 
} 

Fleetio（注意填充增加）：

.navbar .nav > li > a { 
    float: none; 
    padding: 20px 15px 20px; 
    color: #555; 
    text-decoration: none; 
    text-shadow: 0 1px 0 white; 
} 

为了解决导航栏延伸到浏览器窗口的边缘水平地，在容器内包裹导航栏（即，<div class="container"></div>）。