如何解决导航栏中的 Bootstrap 徽标延伸到下面的图像横幅上
我需要实现的是有一个日志(高度 300 像素),它延伸到导航栏的底部(高度 150 像素)并覆盖下面的图像横幅。
如何实现?
<header class="container-fluid sticky" id="headerSite">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="/"><img src="/logo.png" alt="logo" style="max-width: 120px;"></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav mr-auto">
menus...
</div>
</div>
</nav>
</div>
</header>
<section class="site-page">
<div class="container-fluid banner" style="background-image: url('banner.jpg');">
<div class="container h-100">
<div class="row h-100 align-items-end">
<div class="col-12 text-left">
<div class="row">
<div class="col-12">
<h1 class="title">
TEXT
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
...
</section>
和CSS...
.site-header { z-index:100; }
.site-footer { z-index:10; padding-top:16px; padding-bottom:8px; }
.site-page { z-index:10; padding-top:128px; padding-bottom:90px; }
#headerSite {
z-index:100;
background-color:white;
}
.sticky {
position:fixed;
top:0;
width:100%;
z-index:9;
}
.banner {
height: 50vh;
min-height: 200px;
max-height: 400px;
background-size: cover;
background-position: left;
background-repeat: no-repeat;
margin-bottom:16px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。