时间戳

首页 > 解决方案 > Boostrap 4 - 徽标图像不展开标题

bootstrap-4 - Boostrap 4 - 徽标图像不展开标题

问题描述

我正在使用引导模板（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 -->

如果有人可以帮助我，那就太棒了:)

标签： bootstrap-4

解决方案

尝试将类添加img img-fluid到您的标题图像。这会将最大宽度设置为 100%，并且您的图像不会溢出

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

推荐阅读