css Bootstrap 5带有下拉菜单的导航栏将不工作

cyvaqqii 于 2022-12-01 发布在 Bootstrap

关注(0)|答案(2)|浏览(184)

这个导航栏包含的下拉菜单在从Bootstrap v5.2.2转换到v5.2.3时不起作用。它不是下拉菜单，而是保持不变。有人能解释一下我做错了什么吗？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="page">
  <header>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">AT Products LLC</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">AT Products</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Products</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
                <li><a class="dropdown-item" href="/flash">Flash Documentation</a></li>
                <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
                <li><a class="dropdown-item" href="/mdickie">MDickie Projects</a></li>
                <li><a class="dropdown-item" href="/bxpp">BxPP</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

css

来源：https://stackoverflow.com/questions/74603282/bootstrap-5-navbar-with-dropdown-menus-will-not-work

2条答案

按热度按时间

nwlqm0z11#

您没有更改捆绑的javascript：

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<html lang="en">
<head>    
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">  
        <script src="/static/purecookie.js"></script>
      </head>
      <body>
      <div id="page">
    <header>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">AT Products LLC</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">AT Products</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Products</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
                <li><a class="dropdown-item" href="/flash">Flash Documentation</a></li>
                <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
                <li><a class="dropdown-item" href="/mdickie">MDickie Projects</a></li>
                <li><a class="dropdown-item" href="/bxpp">BxPP</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
        </header>  
      </div>
      <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    </body>
    </html>

赞(0）回复(0）举报 2022-12-01

nbysray52#

我觉得你只是简单地更新了CDN代码的版本。这是行不通的。完整性密钥必须与实际文件匹配。你可以在浏览器控制台中看到错误：
无法在资源的'integrity'属性中找到有效摘要
确保从CDN复制新代码。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="page">
  <header>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">AT Products LLC</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">AT Products</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Products</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
                <li><a class="dropdown-item" href="/flash">Flash Documentation</a></li>
                <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
                <li><a class="dropdown-item" href="/mdickie">MDickie Projects</a></li>
                <li><a class="dropdown-item" href="/bxpp">BxPP</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2022-12-01

我来回答

css Bootstrap 5带有下拉菜单的导航栏将不工作

2条答案

相关问题

热门标签

最新问答