html - 固定在顶部的 Bootstrap 4 轮播正在隐藏下一部分
问题描述
我正在使用 Bootstrap 4 导航栏和轮播。轮播固定在页面顶部,导航栏在其上方。现在我正在研究下一部分(关于我们),但它正在轮播之下。我尝试通过隐藏溢出来修复它,但它不起作用。我可以看到一小部分关于我们的部分出来了,但仅此而已。这是我只使用 html 和 css 的小提琴。
https://jsfiddle.net/zakero/8o3acdx0/1/
<header class="headersection">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">SPIRIT8</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Testimonials</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="slider">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>WELCOME ON <span>SPIRIT8</span></h5>
<p>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></p>
</div>
</div>
<div class="carousel-item">
<img src="img/4.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>WELCOME ON <span>SPIRIT8</span></h5>
<p>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></p>
</div>
</div>
<div class="carousel-item">
<img src="img/banner.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>WELCOME ON <span>SPIRIT8</span></h5>
<p>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></p>
</div>
</div>
</div>
</div>
</section>
<section class="aboutus">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="aboutusimg">
<img src="img/1.png">
</div>
</div>
<div class="col-md-6">
<div class="aboutusdesc">
<h4>ABOUT US</h4>
<h2>SOME WORDS <span>ABOUT US</span></h2>
<hr>
<p>We love building and rebuilding brands through our specific skills. Using color, fonts and illustration, we brand companies in a way they will never forget.</p>
<ul>
<li>Mission - <span>We deliver uniqueness and quality</span></li>
<li>Skills - <span>Delivering fast and excellent results</span></li>
<li>Clients - <span>Satisfied clients thanks to our experience.</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
有人请帮助有需要的兄弟。
PS。我找过以前有同样问题的帖子。但是我只找到了一个没有任何解决方案的,所以我再次发布。
解决方案
position: absolute;
从slider
类中删除
对于导航栏问题,将类更新为,
.headersection {
position: absolute;
width: 100%;
z-index: 2;
}
推荐阅读
- amazon-web-services - ECS 丢失服务的自动伸缩
- android - Room 和 SQLite:迁移没有正确处理实体
- ansible - 在 ansible 中使用嵌套的 with_items 任务
- sql - 如何加入 2 个表格以接收所需的所有数据
- windows - 在 Eclipse 中运行与运行的区别
- java - 使用 java MethodHandles 实现鸭子类型
- c++ - 如何在函数中通过引用传递 char[] 作为调用
- azure - 在哪里可以找到用 Powershell 编写的 Http 触发函数的应用服务日志?
- spring - 正文中的 Spring Boot OAuth2RestTemplate 客户端凭据
- botframework - Teams Auth:如何在 oAuth 登录后检索令牌响应?