如何在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>）。