html - 导航栏中的水平对齐

Question

后期编辑:This is how the logo looks now

编辑:删除行类有效。现在我正在尝试删除 Logo 图像后面的灰色背景。

我正在尝试将 Logo 与导航栏中的其余文本对齐(使用 Bootstrap ，但由于某种原因我无法发现我不能这样做。文本项在它们之间正确对齐，但 Logo 跳转无论我的定义如何，较高的行都会自动居中对齐。

代码如下:

<header>
  <nav class="navbar navbar-default">
     <div class="container-fluid">
        <div class="navbar-header">
           <a class="navbar-brand" href="http://#">
              <img alt="Brand" src="img/logo_s.png">
           </a>
        </div>
     </div>
  </nav>
  <div class="row">
    <nav class="col-sm-8">
      <p> Play </p>
      <p> Learn </p>
      <p> Grow </p>
    </nav>
  </div>
</header>

结果如下: how it looks now

Answer 1

CSS 将位于以下类之一

.navbar-header {
    background: #fff;
    border:0;
}
.navbar-header a {
    background: #fff;
    border:0;
}

如果它没有改变，请在分号前添加 !important 以强制它覆盖 bootstrap。