Question

我正在使用引导程序模板（https://bootstrapmade.com/demo/TheEvent/），并且试图在标头中包含徽标。不幸的是，徽标重叠并且没有展开标题，我也不明白为什么。标头应固定在网站顶部，大小必须足以为我的徽标留出足够的空间。

我尝试增加图像的最大高度，但这只会导致重叠。

CSS：

#header {
    height: 90px;
    padding: 50px 0;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: all 0.5s;
    z-index: 997;
}

#header.header-scrolled,
#header.header-fixed {
    background: rgba(0, 0, 0, 0.98);
    height: 70px;
    padding: 15px 0;
    transition: all 0.5s;
}

#header #logo h1 {
     font-size: 36px;
     margin: 0;
     padding: 6px 0;
     line-height: 1;
     font-family: "Calibri", sans-serif;
     font-weight: 700;
     letter-spacing: 3px;
     text-transform: uppercase;
}

#header #logo h1 span {
     color: #eccd1b;
}

#header #logo h1 a,
#header #logo h1 a:hover {
      color: #fff;
} 

#header #logo img {
     padding: 0;
     margin: 0;
     max-height: 50px;
}

<header id="header">
    <div class="container">

      <div id="logo" class="pull-left">
        <!-- Uncomment below if you prefer to use a text logo -->
        <!-- <h1><a href="#main">Kombucha <span>Summit</span></a></h1>-->
        <a href="#intro" class="scrollto"><img src="img/logo.png" alt="" title=""></a>
      </div>

      <nav id="nav-menu-container">
        <ul class="nav-menu">
          <li class="menu-active"><a href="#intro">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#supporters">Sponsors</a></li>
          <!--<li><a href="#speakers">Speakers</a></li>-->
          <!--<li><a href="#schedule">Schedule</a></li>-->
          <li><a href="#venue">Venue</a></li>
          <!--<li><a href="#hotels">Hotels</a></li>-->
          <!--<li><a href="#gallery">Gallery</a></li>-->
          <li><a href="#contact">Contact</a></li>
          <li class="buy-tickets"><a href="#buy-tickets">Get notified</a></li>
        </ul>
      </nav><!-- #nav-menu-container -->
    </div>
  </header><!-- #header -->

如果有人可以帮助我，那会很棒：）

Answer 1

尝试将类img img-fluid添加到标题图片中。这样会将最大宽度设置为100％，并且图片不会溢出

<img src="img/logo.png" class="img img-fluid" alt="" title="">

Boostrap 4-徽标图像不会扩展标题

1 个答案: