Question

我只是想让我的徽标看起来很花哨，我确实设法让它看起来很花哨（让它看起来像椭圆形，投影，只显示一半的圆圈），JENKINS-28071，现在的问题是导航栏的高度似乎是由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 code：

<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行，您会看到导航栏达到正常大小。

同样正如我所提到的，徽标的img大小似乎影响了navar的大小，例如。如果你将img的大小更改为10px（荒谬！我知道），导航栏将恢复正常大小。

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

谢谢。

亚历-Z

Answer 1

只需将height: 100px;设置为.navbar即可。此外，您应该将height: 100px; overflow: hidden;设置为.navbar标头，以便阴影不会显示在图像上方。您可以更改高度值，以满足您的需求。如果您的height超过150像素，则无需将overflow: hidden;设置为导航栏标题。

当navbar-logo被赋予自定义样式时，Navbar会在高度上膨胀

1 个答案: