css - 标题导航栏中 CSS 背景的 Bootstrap 3 问题

Question

这是我的 jsFiddle .如您所见，我正在使用 Twitter Bootstrap 3 创建一个简单的“标题”导航菜单。

这有两个问题:

1. 对于 Logo ，我尝试使用 CSS 背景而不是 <img/>标记，它要么不呈现，要么背景框/窗口太小而无法显示实际 Logo ；和
2. 导航菜单太“高”；这意味着我希望它更短并且更紧密地“拥抱”菜单链接。您会注意到所有链接下方都有大量灰色，并且“登录”链接需要与绿色的“注册”按钮水平对齐

根据 Logo 问题，您会注意到我正在尝试增大宽度 (50%)，但浏览器似乎没有响应。还值得一提的是 /images/mylogo.png 是一个有效的 URL，当我使用 <img/> 时标签而不是 <a>/CSS 背景， Logo 显示得很好。

根据导航菜单高度问题，我怀疑可能与这部分有关:

<!-- But here I'm not explicitly setting the height and so perhaps TB3 is setting one for me...? -->
<div id="navbar" class="navbar-collapse collapse">
    ...
</div>

但我不能确定。有人看到我哪里出错了吗？

Answer 1

使用这个:

<nav class="navbar navbar-default header-height">
  <div class="container-fluid header-height">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

然后将这个css写在其他文件中并附加到你的html文件中

.header-height {
    height: 30px;
}

.navbar-brand {
    background: url(...);
    background-size: 50%;
    padding: ??; /* padding for vertical align */
}