导航栏切换按钮在Bootstrap v4.1.3中不起作用
[英]Navbar Toggle Button Not Working in Bootstrap v4.1.3
问题描述
I am using BootstrapCDN v4.1.3 and I want my navbar to be fixed to the top of the user's browser at all times. 
我正在使用BootstrapCDN v4.1.3，并且我希望导航栏始终固定在用户浏览器的顶部。 When I set the nav div to position: fixed; 当我将nav div设置为position: fixed; , none of the links can be clicked on when the browser is in desktop mode and the navbar toggle button does not drop down when the browser is in mobile mode. ，当浏览器处于桌面模式时，无法单击任何链接，而当浏览器处于移动模式时，导航栏切换按钮不会下拉。 As soon as I remove the position: fixed; 一旦我删除了position: fixed; CSS attribute, everything works in the navbar, except it is no longer positioned above the stock video and it pushes the video down when the navbar menu is toggled in a mobile browser. CSS属性，所有内容都可以在导航栏中使用，只是它不再位于股票视频上方，并且当在移动浏览器中切换导航栏菜单时，它将视频向下推。 This is not my desired result and I would appreciate if someone could help me figure out how to get the navbar to function properly while also maintaining a fixed position at the top of the user's browser. 这不是我想要的结果，如果有人可以帮助我弄清楚如何使导航栏正常运行，同时又在用户浏览器顶部保持固定位置，我将不胜感激。
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>
3 个解决方案
解决方案1
2 2018-09-21 18:08:12
Settings the navbar z-index: property to 1 fixes this: 将navbar z-index:属性设置为1可解决以下问题：
nav.navbar {
background-color: rgba(144, 188, 244, .8) !important;
position: fixed;
width: 100%;
z-index: 1;
}
I'd also set padding-top to the height of your navbar on body like so: 我还将padding-top设置为您的导航栏在body上的高度，如下所示：
body {
padding-top: 59px; /* the height of your navbar */
}
nav.navbar {
top: 0; /* bump the header back to the top */
}
解决方案2
1 2018-09-21 18:12:52
您也可以尝试使用bootstrap固定顶层类来修复导航栏，例如
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
解决方案3
1 2018-09-21 18:15:50
Add padding to the top of the video to allow for the Navbar height.. 在视频顶部添加填充以允许导航栏高度。
#stockVideo {
width: 100%;
height: auto;
padding-top: 60px;
}
https://www.codeply.com/go/YWnrU7WAXM https://www.codeply.com/go/YWnrU7WAXM
Ideally, the body would have padding-top instead as recommended in the Bootstrap docs... 理想情况下，根据Bootstrap文档中的建议，主体应具有padding-top。
"Fixed navbars use position: fixed, meaning they're pulled from the normal flow of the DOM and may require custom CSS (eg, padding-top on the ) to prevent overlap with other elements."
body {
padding-top: 60px;
}
This has been asked and answered before . 这已经被问过和回答过了 。
EDIT 编辑
If you want the Navbar fixed, use the Bootstrap fixed-top class. 如果要固定导航栏，请使用Bootstrap fixed-top类。 Using position:fixed alone won't work because you'd need to also set z-index. 单独使用position:fixed将不起作用，因为您还需要设置z-index。 As you can see fixed-top works here: https://www.codeply.com/go/YWnrU7WAXM 如您在此处看到的fixed-top作品： https : //www.codeply.com/go/YWnrU7WAXM
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light"></nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.