[英]Bootstrap navbar dropdown menu/collapsed navbar not opening
I am trying to add a navbar to this website, but for some reason it is not functioning how I thought it would. 我正在尝试向该网站添加导航栏,但是由于某些原因,它无法正常运行。 The main problem I am trying to solve is getting the dropdown menu to actually display the list.
我要解决的主要问题是获取下拉菜单以实际显示列表。 It visually looks like the menu is already expanded, but I don't know if that has anything to do with why it is not working.
从外观上看,菜单似乎已经展开,但是我不知道这是否与为什么它不起作用有关。 Currently, the collapsed version will open from the hamburger menu only because of the CSS I added.
目前,由于我添加的CSS,折叠后的版本只能从汉堡包菜单中打开。 Without the CSS, that navbar will expand, but immediately collapse again.
没有CSS,该导航栏将扩展,但立即会再次崩溃。 Things I have tried:
我尝试过的事情:
I would appreciate it is someone could help me figure out why this is not working. 我会很感激有人可以帮助我弄清楚为什么它不起作用。 Thanks!
谢谢!
.navbar-collapse.collapse.in { display: block!important; }
<!DOCTYPE html> <html> <head> <title>Title</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="index.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-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="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="jumbotron"> <h1 class="display-3">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> </body> </html>
That's because your bootstrap.js
is version 3.3.7, and this is not how you implement sub-menu (on bootstrap 3). 这是因为
bootstrap.js
版本是3.3.7,这不是实现子菜单(在bootstrap 3上)的方式。 Although, If you're using bootstrap 4 already, you should consider updating your bootstrap.js
to version 4.0.0 (And you should use the same versions of bootstrap.js
and bootstrap.css
to avoid unexepected bugs (like you just had). 虽然,如果您已经在使用bootstrap 4,则应考虑将
bootstrap.js
更新到版本4.0.0(并且应该使用相同版本的bootstrap.js
和bootstrap.css
以避免意外的错误(就像您刚遇到的一样) 。
.navbar-collapse.collapse.in { display: block!important; }
<!DOCTYPE html> <html> <head> <title>Title</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="index.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-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="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="jumbotron"> <h1 class="display-3">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.