Bootstrap 導航欄，為什么我的導航欄沒有正確展開

Question

有人可以幫我修復我的導航欄嗎？ 單擊切換器時它沒有正確擴展，我確定我放錯了一個 div，但我在元素周圍移動但收效甚微......

<header class="site-header" role="banner">
  <div class="navbar-wrapper">
    <nav class="navbar navbar-light bg-light navbar-expand-lg ">
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <!-- end button -->
      <a class="navbar-brand" src="index.html"><img class="logo-brand"src="img/kin.jpg" alt="header icon"></a>
    
    <!-- collapsed section -->
      <div class="navbar-collapse collapse" id="navbarToggler">
        <!-- ml-auto for right and mr-auto for left -->
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active"><a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item"><a class="nav-link"  href="#">Activities</a></li>

        </ul>
      </div>
      
    </nav> <!--navbar -->
  </div><!--navbar wrapper-->
</header>

我已經將它與一個有效的代碼進行了比較，但找不到區別......任何有眼光的人來糾正我的錯誤？ 我在我的代碼中復制了一個工作的折疊導航欄，同樣的事情發生了，當文本從其父級中出來時，包裝器不會展開

謝謝

Answer 1

看看下面的例子：

你的代碼沒有問題。 確保為庫提供正確的鏈接。 我添加了引導程序 css 和 js 庫鏈接。 並且在 bootsrap js 鏈接之前需要 Jquery。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <header class="site-header" role="banner"> <div class="navbar-wrapper"> <nav class="navbar navbar-light bg-light navbar-expand-lg "> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <.-- end button --> <a class="navbar-brand" src="index.html"><img class="logo-brand"src="img/kin.jpg" alt="header icon"></a> <!-- collapsed section --> <div class="navbar-collapse collapse" id="navbarToggler"> <!-- ml-auto for right and mr-auto for left --> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Activities</a></li> </ul> </div> </nav> <!--navbar --> </div><!--navbar wrapper--> </header>

Answer 2

`

測試首頁

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width", initial-scale="1.0" shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

`

此外，不要忘記在 HTML 文檔的頭部添加初始樣式表導入，因為該樣式表將在正確顯示頁面方面發揮關鍵作用。 指定設備寬度的寬度將允許 html 文檔調整到設備寬度，並且 UTF-8 將字符編碼指定為 HTML 解釋器，這是所有開發人員都應該養成的習慣！