Bootstrap 3 Navbar - 导航栏折叠属性的问题

Question

所以我正在运行Bootstrap 3，并试图在我的导航栏中包含一个图像（一个徽标）;此外，我想将导航栏链接相对于导航栏垂直居中。我有这个代码用于我的标题/导航栏：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href= <%= root_path %>> <img src=<%= asset_path("akpsi_bw_200.png")%> alt="" />   </a>
...
...

和这些风格：

.brand {
  height:40px;
  width:40px;
}

.navbar-inner li a {
 line-height: 40px;
}

这很好，而且有效，产生了这个：

但是，缩小窗口时出现两个问题：

1）展开标题链接的按钮未垂直对齐。我该如何居中？ （我也想让按钮变小，我该怎么做？）

2）当我展开链接时，line-height: 40px;仍然有效，因此将我的所有链接分开，这看起来很糟糕。如何覆盖此line-height？下面是一个例子：

谢谢！

Answer 1

对于上述两种情况，您可以使用媒体查询来解决问题。

例如，对于低于768px的分辨率，导航栏通常会缩小使用范围：

@media (max-width:768px) {
.brand {
margin-top:XXpx;
}
.navbar-inner li a {
line-height:20px;
}
}