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

Question

所以我正在运行 Bootstrap 3，并试图在我的导航栏中包含一个图像(一个 Logo )；此外，我想将我的导航栏链接相对于导航栏垂直居中。我的标题/导航栏有以下代码:

<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;
}
}