导航栏无法通过 bootstrap5 在移动设备上扩展

Question

我正在使用 Bootstrap 5 创建一个网站，但我的导航栏不起作用。\n当我在移动设备上时，它不会展开。

\n

\r\n

\r\n

@import url(\'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\');\n/*\n#FF3633 - Vermelho\n\n*/\n*{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: \'Poppins\', sans-serif;\n}\n/* estilo - header */\n.navbar {\n    background-color: #131313;\n    padding: 1rem 8rem;\n    z-index: 1000;\n\n}\n\n.navbar .navbar-brand {\n\n    font-size: 1.4rem;\n    font-weight: 800;\n}\n\n#navbarSupportedContent > ul > li:nth-child(n) > a {\n  color: #fff;\n  font-size: 1.1rem;\n  padding: 0 0.8rem;\n}\n\n#navbarSupportedContent > ul > li:nth-child(n) > a:hover {\n    color: #FF3633;\n}\n\n#navbarSupportedContent button {\n    background-color: #FF3633;\n    font-weight: 600;\n    padding: 0.4rem 1.4rem;\n    border-radius: 30px;\n    outline: none;\n}\n\n#navbarSupportedContent button:hover {\n    background-color: #CC3036;\n}

\r\n

<header>\n<nav class="navbar navbar-expand-lg navbar-dark fixed-top">\n    <div class="container-fluid">\n      <a class="navbar-brand" href="#">\n        <img src="img/logo-wt.png" width="100" height="30" alt="">\n      </a>\n      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n        <span class="navbar-toggler-icon"></span>\n      </button>\n      <div class="collapse navbar-collapse" id="navbarSupportedContent">\n        <ul class="navbar-nav mx-auto mb-2 mb-lg-0">\n          <li class="nav-item">\n            <a class="nav-link" href="#">Quem Somos</a>\n          </li>\n          <li class="nav-item">\n            <a class="nav-link" href="#">Servi\xc3\xa7os</a>\n          </li>\n          <li class="nav-item">\n            <a class="nav-link" href="#">Servi\xc3\xa7os</a>\n          </li>\n          <li class="nav-item">\n            <a class="nav-link" href="#">Contato</a>\n          </li>\n\n        </ul>\n          <button class="btn text-light" type="submit">Contato</button>\n        </div>\n    </div>\n\n</nav>\n<div class="mid">\n    <video autoplay muted loop>\n        <source class="embed-responsive" src="darkvd.mp4" type="video/mp4">\n    </video>\n    <div class="hero text-center">\n        <h2 class="text-light display-3 fw-bold m-lg-3 mx-3">Suporte Linux e Cloud</h2>\n        <p class="text-light mx-auto">Criando um paralelo entre baixo custo, disponibilidade, praticidade e satisfa\xc3\xa7\xc3\xa3o</p>\n        <a class="text-light fw-bold m-lg-3 mx-3 " href="#"> SAIBA MAIS </a> \n\n    </div>\n</div>\n<header>\n<nav class="navbar navbar-expand-lg navbar-dark fixed-top">\n    <div class="container-fluid">\n      <a class="navbar-brand" href="#">\n        <img src="img/logo-wt.png" width="100" height="30" alt="">\n      </a>\n      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n        <span class="navbar-toggler-icon"></span>\n      </button>\n      <div class="collapse navbar-collapse" id="navbarSupportedContent">\n        <ul class="navbar-nav mx-auto mb-2 mb-lg-0">\n          <li class="nav-item">\n            <a class="nav-link" href="#">Quem Somos</a>\n          </li>\n          <li class="nav-item">\n            <a class="nav-link" href="#">Servi\xc3\xa7os</a>\n          </li>\n          <li class="nav-item">\n            <a class="nav-link" href="#">Servi\xc3\xa7os</a>\n          </li>\n          <li class="nav-item">\n            <a class="nav-link" href="#">Contato</a>\n          </li>\n\n        </ul>\n          <button class="btn text-light" type="submit">Contato</button>\n        </div>\n    </div>\n\n</nav>\n<div class="mid">\n    <video autoplay muted loop>\n        <source class="embed-responsive" src="darkvd.mp4" type="video/mp4">\n    </video>\n    <div class="hero text-center">\n        <h2 class="text-light display-3 fw-bold m-lg-3 mx-3">Suporte Linux e Cloud</h2>\n        <p class="text-light mx-auto">Criando um paralelo entre baixo custo, disponibilidade, praticidade e satisfa\xc3\xa7\xc3\xa3o</p>\n        <a class="text-light fw-bold m-lg-3 mx-3 " href="#"> SAIBA MAIS </a> \n\n    </div>\n</div>

\r\n

\r\n

\r\n

\n

按钮图片

\n

\n

Answer 1

Bootstrap 5 已将所有数据属性名称命名为data-bs-*.
更改以下内容：

data-target="#navbarSupportedContent"

对此：

data-bs-target="#navbarSupportedContent"