时间戳

首页 > 解决方案 > 不知道为什么我的可折叠导航栏不起作用

bootstrap-4 - 不知道为什么我的可折叠导航栏不起作用

问题描述

嗨，我在我的网站中使用了 bootstrap，制作了一个可折叠的导航栏。当我调整屏幕大小时，导航栏会折叠。但是，当我单击可折叠按钮时，导航栏不会出现在下方。

我的代码：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
         <a class="navbar-brand" href="#">
             <img src="images/logo.jpg" alt="Logo" height="45" width="45">
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
           <span class="navbar-toggler-icon"></span>
         </button>
         
         <div class="navbar-collapse collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
             <li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
             </li>
             <li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
             </li>
          </ul>
         </div>
    </nav>

我还包括了引导 cdn 链接：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

非常感谢任何帮助。

标签： bootstrap-4navbar

解决方案

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
         <a class="navbar-brand" href="#">
             <img src="https://source.unsplash.com/random" alt="Logo" height="45" width="45">
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-controls="collapsibleNavbar">
           <span class="navbar-toggler-icon"></span>
         </button>
         
         <div class="navbar-collapse collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
             <li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
             </li>
             <li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
             </li>
          </ul>
         </div>
    </nav>

data-toggle 应该是要切换的元素的 ID。

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>

推荐阅读