简体   繁体   English

Bootstrap 导航栏折叠不展开以显示菜单的链接

[英]Bootstrap navbar collapse not expanding to show links of the menu

I built a django website with bootstrap template.我用引导模板构建了一个 django 网站。 Somehow, when the size of the website is in mobile format the expand menu feature of the navber is not expanding to show the links/items of the navbar.不知何故,当网站的大小为移动格式时,导航器的扩展菜单功能不会扩展以显示导航栏的链接/项目。

Can somehow say how to fix this?能以某种方式说如何解决这个问题吗?

 .nosh_color { font-family: sans-serif; font-size: 21px; color: #5c39f9; }.nosh_text_color { font-family: sans-serif; color: #5c39f9; }.header_color { color: #333333;important. }:grey_color { color; #6f6f6f. }:fa { padding; 9px: font-size; 21px: width; 33px: text-align; center: text-decoration; none: margin; 5px 2px. }:fa:hover { opacity. 0;7. }:fa-facebook { background; #3b5998: color; white. }:fa-linkedin { background; #007bb5: color; white. }:fa-instagram { background; #125688: color; white. }:footer { position; fixed: left; 0: bottom; 0: width; 100%: background-color; #212529: color; white: text-align; center; }
 <link rel="canonical" href="https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /> <link rel="icon" href="/media/blog_images/nosh-white-short.png" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top"> <div class="container-fluid"> <a class="navbar-brand" href="https://nosh.tech/"> <img src="/media/blog_images/nosh-white.png" width="79" alt="" /> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="/"><div class="nosh_color">articles</div></a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="/contact"><div class="nosh_color">contact us</div></a> </li> </ul> </div> </div> </nav>

The problem is the lack of js plugin in the code.问题是代码中缺少js插件。 Add these two script tags:添加这两个脚本标签:

This is jQuery:这是 jQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This is bootstrap:这是引导程序:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>

Run snippet:运行片段:

 .nosh_color { font-family: sans-serif; font-size: 21px; color: #5c39f9; }.nosh_text_color { font-family: sans-serif; color: #5c39f9; }.header_color { color: #333333;important. }:grey_color { color; #6f6f6f. }:fa { padding; 9px: font-size; 21px: width; 33px: text-align; center: text-decoration; none: margin; 5px 2px. }:fa:hover { opacity. 0;7. }:fa-facebook { background; #3b5998: color; white. }:fa-linkedin { background; #007bb5: color; white. }:fa-instagram { background; #125688: color; white. }:footer { position; fixed: left; 0: bottom; 0: width; 100%: background-color; #212529: color; white: text-align; center; }
 <link rel="canonical" href="https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /> <link rel="icon" href="/media/blog_images/nosh-white-short.png" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top"> <div class="container-fluid"> <a class="navbar-brand" href="https://nosh.tech/"> <img src="/media/blog_images/nosh-white.png" width="79" alt="" /> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="/"><div class="nosh_color">articles</div></a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="/contact"><div class="nosh_color">contact us</div></a> </li> </ul> </div> </div> </nav>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM