Bootstrap 导航栏内容在折叠时不显示

Question

我有以下 html 带有导航栏的文档。导航栏折叠时的问题，无法显示内容。我已确保 data-target 指向正确的元素。我还尝试直接从 Bootstrap 的主页下载导航栏代码，当我折叠导航栏时，我也看不到内容。因此我怀疑问题是否与我的 Bootstrap 安装有关？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap css-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href=/static/main.css>
    <link rel="stylesheet" href=/static/style.css>
    <link rel="shortcut icon" type="image/png" href="/static/media/favicon.png"/>
    <title>Dimsum Siblings</title>
    <!--font-awesome including icon for shopping cart-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    

<nav class="navbar navbar-expand-lg navbar-light bg-secondary" id ="navbar">
    <a class="navbar-brand navbar-left" href="/" id="navbarLogoLink">
        <img src="static/media/logoWithText.png" alt="" id="navbarLogo">
    </a>
    
    <button class="navbar-toggler m-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            
                <li class="nav-item active" id="navbarListItem">
                    <a class="nav-link px-6" id ="mainNavlink" href=""><h3 id="linkText">ABOUT US</h3></a>
                </li>
            
                <li class="nav-item active" id="navbarListItem">
                    <a class="nav-link px-6" id ="mainNavlink" href="/dimsumshop"><h3 id="linkText">ORDER DIMSUM BOX</h3></a>
                </li>
            
                <li class="nav-item active" id="navbarListItem">
                    <a class="nav-link px-6" id ="mainNavlink" href=""><h3 id="linkText">INSTRUCTIONS</h3></a>
                </li>
            
                <li class="nav-item active" id="navbarListItem">
                    <a class="nav-link px-6" id ="mainNavlink" href=""><h3 id="linkText">CONTACT</h3></a>
                </li>
            
        </ul>
    </div>
</nav>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    
</body>
</html>

css部分

#navbarLogo {
  width: 10rem;
  height: auto;
}
  
.navbar-brand img {
  height: 50px;
  width: auto;
  padding-left: 30px; 
}
  
#linkText {
  font-family: hdFontMedium;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}
  
#navbarNav {
  justify-content: flex-end;
  align-items: center;
}
  
#navbarListItem {
  padding-left: 10px;
  padding-right: 10px;
}

Answer 1

给你...

变化：

data-toggle="collapse" (Bootstrap 4) 到 data-bs-toggle="collapse" (Bootstrap 5)
data-target="#navbarNav" (Bootstrap 4) 到 data-bs-target="#navbarNav" (Bootstrap 5)

#navbarLogo {
  width: 10rem;
  height: auto;
}

.navbar-brand img {
  height: 50px;
  width: auto;
  padding-left: 30px;
}

#linkText {
  font-family: hdFontMedium;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

#navbarNav {
  justify-content: flex-end;
  align-items: center;
}

#navbarListItem {
  padding-left: 10px;
  padding-right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap css-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href=/static/main.css>
  <link rel="stylesheet" href=/static/style.css>
  <link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
  <title>Dimsum Siblings</title>
  <!--font-awesome including icon for shopping cart-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>


  <nav class="navbar navbar-expand-lg navbar-light bg-secondary" id="navbar">
    <a class="navbar-brand navbar-left" href="/" id="navbarLogoLink">
      <img src="static/media/logoWithText.png" alt="" id="navbarLogo">
    </a>

    <button class="navbar-toggler m-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">ABOUT US</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="/dimsumshop">
            <h3 id="linkText">ORDER DIMSUM BOX</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">INSTRUCTIONS</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">CONTACT</h3>
          </a>
        </li>

      </ul>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

</body>

</html>

Bootstrap 导航栏内容在折叠时不显示

Bootstrap navbar content not showing when collapsed

twitter-bootstrap

bootstrap-5