Bootstrap css 导航栏未在移动设备上完全显示

Question

我正在尝试让我的导航栏在移动设备上完全显示，目前它只显示“导航栏品牌”项目。 这是我的代码：

<nav class="navbar navbar-expand-lg" style="background-color: #757070; ">
    <div class="container-fluid">
      <a class="navbar-brand" style="color: #ffff; font-size: xx-large; font-family: Inter;" href="index.html">Metal Arte</a>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link " style="color: #ffff ; font-size: x-large; font-family: inter;"
             href="historia.html">Nossa história</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;" 
            href="#">Conheça nossos serviços</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;"
             href="contato.html">Entre em Contato</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Answer 1

我试着回答你的问题。 在您的代码中，确保将 Bootstrap JS 导入到您的项目中。

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

之后，再次尝试运行您的项目。 谢谢