我刚刚学习前端。当到达超小页面时，我有一个问题是制作一个覆盖导航栏而不是下拉菜单。这就是我所做的:
function openNav() {
document.getElementById("navbarSupportedContent").style.height = "100%";
}
function closeNav() {
document.getElementById("navbarSupportedContent").style.height = "0%";
}#navbarSupportedContent {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#navbarSupportedContent a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>当我尝试点击按钮时，它变得特别小，覆盖层下降，但它没有达到百分之一百的页面，它突然再次上升。有人可以帮助我吗？
提前致谢!
最佳答案
发生这种情况是因为您混淆了 Bootstrap 核心功能和您的自定义功能。
只需删除 Bootstrap 的 Collapse 类，因为您已经编写了 javascript 代码来实现所需的功能。
添加这行 CSS:
@media (min-width: 992px) {
.navbar-expand-lg .navbar-toggler {
display: block;
}
}
由于 Bootstrap 4 媒体查询将隐藏大于 992px 的屏幕与该类匹配的元素。
然后从 HTML 中删除所有与折叠相关的类:
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navbarSupportedContent">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
这是一支带电工作笔:https://codepen.io/alezuc/pen/dyYGobJ
希望这有帮助!
关于javascript - 如何在bootstrap中制作覆盖导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61222681/