导航栏切换按钮在引导程序 v4.1.3 中不起作用

>我正在使用BootstrapCDN v4.1.3，我希望我的导航栏始终固定在用户浏览器的顶部。当我将navdiv设置为position: fixed;时，浏览器处于桌面模式时无法单击任何链接，并且当浏览器处于移动模式时导航栏切换按钮不会下拉。一旦我删除了position: fixed;CSS 属性，导航栏中的一切正常，除了它不再位于库存视频上方，并且在移动浏览器中切换导航栏菜单时它会向下推送视频。这不是我想要的结果，如果有人能帮助我弄清楚如何让导航栏正常运行，同时在用户浏览器顶部保持固定位置，我将不胜感激。

nav.navbar {
background-color: rgba(144, 188, 244, .8) !important;
position: fixed;/* <---- Causing the navbar issue */
width: 100%;
}
div.stockVideo {
padding: 0;
}
#stockVideo {
width: 100%;
height: auto;
}

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/normalize.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Website</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="media/placeholderLogo.png" width="44" height="44" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Stock video -->
<div class="container-fluid stockVideo">
<video autoplay muted loop id="stockVideo">
<source src="media/stockVideo.mp4" type="video/mp4">
</video>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

将导航栏z-index:属性设置为1可解决此问题：

nav.navbar {
background-color: rgba(144, 188, 244, .8) !important;
position: fixed;
width: 100%;
z-index: 1;
}

我还padding-top设置为导航栏的高度body如下所示：

body {
padding-top: 59px; /* the height of your navbar */
}
nav.navbar {
top: 0; /* bump the header back to the top */
}

您也可以尝试使用引导程序固定顶级类来修复导航栏，例如

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

在视频顶部添加填充以允许导航栏高度。

#stockVideo {
width: 100%;
height: auto;
padding-top: 60px;
}

https://www.codeply.com/go/YWnrU7WAXM

理想情况下，身体将按照 Bootstrap 文档中的建议使用填充顶部......

"固定导航栏使用位置：固定，这意味着它们是从 DOM 的正常流程，可能需要自定义 CSS(例如，填充顶部以防止与其他元素重叠。

body {
padding-top: 60px;
}

这在以前已经问过和回答过了。

编辑

如果要修复导航栏，请使用引导fixed-top类。单独使用position:fixed是行不通的，因为您还需要设置 z-index。如您所见fixed-top在这里工作：https://www.codeply.com/go/YWnrU7WAXM

<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light"></nav>

相关内容

最新更新

热门标签：