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