[英]Bootstrap 4 collapse navbar not working correctly
我想为平板电脑和手机的较小屏幕尺寸添加引导折叠导航栏。 出于某种原因，即使在常规笔记本电脑屏幕尺寸下，导航栏通常也会折叠。 此外，当我按下按钮时，链接出现在导航栏下方而不是导航栏内。 不明白这个问题，因为我之前在不同的项目中使用过相同的引导折叠代码并且没有问题。 可以的话请帮忙，谢谢。
body { margin: 0; padding: 0; background: url(../Images/td.jpg) center/cover fixed no-repeat; opacity: 5; } /* Navbar */ .navbar { background: #0c0452; padding: 20px 20px; width: 100%; height: 80px; } .logo { height: 50px; margin: 5px 10px; } .links { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .links li { display: inline; } .links li a { padding: 40px; color: gold; font-family: "Calistoga", cursive; } /* End of Navbar */
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="stylesheet" href="css/style.css" /> <title>Lavonte Hights</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet" /> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <!-- Latest compiled and minified CSS Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <!--Navbar--> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <img src="Images/sheplogo2.jpg" alt="" class="logo" /> <div class="navbar-header"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" > <div class="toggler-btn"> <div class="bar bar1"></div> <div class="bar bar2"></div> <div class="bar bar3"></div> </div> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="links navbar-nav mx-auto"> <li class="nav-item"><a href="#home">Home</a></li> <li class="nav-item"><a href="#bio">Bio</a></li> <li class="nav-item"> <a href="#awards">Career Stats/Awards & Accolades</a> </li> <li class="nav-item"><a href="#film">Film</a></li> </ul> </div> </div> </nav> <!--End of Navbar--> </body> </html>
body { margin: 0; padding: 0; background: url(../Images/td.jpg) center/cover fixed no-repeat; opacity: 5; } /* Navbar */ .navbar { background: #0c0452; padding: 20px 20px; width: 100%; } .logo { height: 50px; margin: 5px 10px; } .links { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .links li { display: inline; } .links li a { padding: 0 40px; color: gold; font-family: "Calistoga", cursive; } .navbar-toggler { color: #ffffff; } @media screen and (max-width:768px) { .links li a { padding: 0 0 5px; color: gold; font-family: "Calistoga", cursive; } } /* End of Navbar */
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="stylesheet" href="css/style.css" /> <title>Lavonte Hights</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet" /> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <!-- Latest compiled and minified CSS Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <!--Navbar--> <nav class="navbar navbar-default navbar-expand-md navbar-fixed-top"> <div class="container-fluid"> <img src="Images/sheplogo2.jpg" alt="" class="logo" /> <div class="navbar-header"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar"> <i class="fa fa-bars" aria-hidden="true"></i> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="links navbar-nav mx-auto"> <li class="nav-item"><a href="#home">Home</a></li> <li class="nav-item"><a href="#bio">Bio</a></li> <li class="nav-item"> <a href="#awards">Career Stats/Awards & Accolades</a> </li> <li class="nav-item"><a href="#film">Film</a></li> </ul> </div> </div> </nav> <!--End of Navbar--> </body> </html>
Bootstrap 导航栏崩溃无法正常工作 || 导航栏折叠不显示点击链接
[英]Bootstrap navbar collapse not working correctly || navbar collapse not showing links on clicking
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.