html - 当导航栏 Logo 被赋予自定义样式时，导航栏的高度会膨胀

Question

我只是想让我的 Logo 看起来很花哨，我确实设法让它看起来很花哨(让它看起来像椭圆形，投影，在 View 中只显示一半的圆圈)，SEE HERE ，现在的问题是导航栏的高度似乎由 navbav-brand img 的大小控制，请注意导航栏的大小异常增加并且没有明显原因。

在我将以下样式添加到 navbar-brand 后，尺寸增加了:

.navbar-brand {
  padding: 0 15px;
  padding: 50px;
  border-radius: 50%;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
  height: auto;
} 

HTML代码:

<nav class="navbar navbar-default navbar-fixed-top navbar-noscroll">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" id="navbar-brand" href="#">
            <img src="http://www.techfume.com/wp-content/uploads/2010/11/logo.jpg" alt="TLC montessori Logo">
        </a>

      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#aboutus">About us</a></li>
          <li><a href="#programmes">programmes</a></li>
          <li><a href="#gallery">gallery</a></li>
          <li ><a href="#contactus">Contact us<span class="sr-only">(current)</span></a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>    

如果您在 chrome 中转到源代码并打开 banner.css 并注释掉第 77-84 行，您将看到导航栏达到其正常大小。

此外，正如我提到的， Logo 的 img 大小似乎会影响 navar 的大小，例如。如果您将 img 的大小更改为 10px(太荒谬了!我知道)，导航栏将恢复到正常大小。

那么是什么导致我的导航栏膨胀得如此可笑？我的意思是有人可以指出“为什么”的确切原因吗？我的意思是我想知道“为什么”会发生这种情况，而不仅仅是如何解决这个问题。

谢谢。

亚历克斯。

Answer 1

只需将 height: 100px; 设置为您的 .navbar。另外你应该设置 height: 100px; overflow: hidden; 到你的 .navbar-header，这样阴影就不会显示在图像上方。您可以更改高度值，以使其适合您的需要。如果您的 height 将超过 150px，则无需将 overflow: hidden; 设置为导航栏标题。