Bootstrap 4 修复了页面内容覆盖的引导导航栏
我在这里使用导航条示例: 我遇到的问题是当我向下滚动页面时,导航栏是固定的,它被下面的内容覆盖 这是导航栏:Bootstrap 4 修复了页面内容覆盖的引导导航栏,bootstrap-4,navigation,Bootstrap 4,Navigation,我在这里使用导航条示例: 我遇到的问题是当我向下滚动页面时,导航栏是固定的,它被下面的内容覆盖 这是导航栏: <!-- Navigation if fluidic defult--> <nav class="nav"> <div class="container"> <div class="logo"> <a href="#">Your Logo</a> <
<!-- Navigation if fluidic defult-->
<nav class="nav">
<div class="container">
<div class="logo">
<a href="#">Your Logo</a>
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
<section class="home">
</section>
<div style="height: 1000px">
<!-- just to make scrolling effect possible -->
现在我自己的内容从这里开始,它包括一个引导转盘和包装在引导容器中的卡片:
!--Main contnet wraped in container Bootstrap grid system-->
<div class="container">
<div class="row">
<!--Take 3 columsn width for our left most list menu-->
<div class="col-lg-3">
<h1 class="my-4">Shop Name</h1>
<div class="list-group ">
<a href="#" class="list-group-item ">Category 1</a>
<a href="#" class="list-group-item ">Category 1</a>
<a href="#" class="list-group-item ">Category 1</a>
</div>
</div>
<!--Main body - Botstrap Carousle-->
<div class="col-lg-9">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade my-4 " data-ride="carousel">
--主contnet封装在容器引导网格系统中-->
店名
我没有包括所有的代码,因为它相当长
这是向下滚动页面时导航栏被其下方内容覆盖的图像:
那么我的问题是什么会导致这种情况呢?您必须添加其他类,如
fixed top
,以便将其修复并覆盖内容。尝试:
<nav class="navbar fixed-top">
[…]
</nav>
我的示例远未完成,但您可以在此处看到更多示例:。您的元素必须有一个fixed-*
类才能获得比下面的内容更高的z-index
,或者可以像这样重写它。如果计划添加两个或多个位置为绝对
或固定
的元素,则应相应地为每个元素设置一个z索引
<header class="navbar fixed-top">
<a class="navbar-brand" href="#" >Your Logo</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="navbar-nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>