gpt4 book ai didi

html - Bootstrap : bring fixed horizontal nav bar above other elements

转载 作者:太空宇宙 更新时间:2023-11-04 05:39:38 25 4
gpt4 key购买 nike

我有一个垂直引导侧边菜单,可以响应地切换到水平。

我遇到的问题是,侧边菜单一旦变为水平状态就会隐藏在其他元素后面,请参见示例,其中侧边菜单会隐藏在小型设备上的文本后面:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head></head>

<body style = "padding-top:55px">

<nav class="navbar navbar-expand-sm navbar-light fixed-top bg-light">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>


<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="position-fixed bg-dark">
<div class="row">
<ul class="nav overflow-auto flex-md-column flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="#">Link 123</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 123</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 123</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 123</a>
</li>
</ul>
</div>
</div>

</div>


<div class="col-12 col-md-8">
<div class="row">
<div class="d-flex">
<h1>Some text</h1>
</div>
</div>

</div>



</div>
</div>




</body>

</html>

https://codepen.io/coffeeeecup/pen/ZEYpBJO

此行为的原因很可能是位置固定的。但我需要这个属性,因为侧边菜单在滚动时应该保持在固定位置。

如何保证元素在子菜单下方固定位置排列?

提前致谢

最佳答案

为位置固定的元素赋予z-index: 1。并根据固定元素的高度对内容进行填充。

关于html - Bootstrap : bring fixed horizontal nav bar above other elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59331540/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com