使用flexbox将bootstrap 4透明导航栏覆盖在图像上
使用flexbox将bootstrap 4透明导航栏覆盖在图像上
提问于 2019-04-14 23:08:37
我需要把一个透明的bootstrap 4导航栏放在一个使用flexbox的全屏图像上。我需要能够扩展一个轮播容器(swiper.js)来填充视图端口。
我已经设法扩展了carousel容器以填充视图端口，但导航栏并不透明地显示在它上面。要查看它当前的功能，请单击此处。要查看我想要实现的目标，请单击此处
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-15 01:53:17
要使图像与导航栏重叠，您只需将position:absolute属性赋予导航栏即可。
.navbar{
position:absolute;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55676742
复制相关文章
相似问题