vue.js 引导导航栏不工作,因为我打算它做

qacovj5a  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(108)

所以我创建了一个带有引导导航栏的着陆页,但是每当我减小屏幕的大小时,汉堡包就不会显示我在其中的项目列表,这就是我试图做的事情,这里是我的代码

<nav class="navbar navbar-expand-lg" id="navbar">
  <div class="container-fluid" id="header">
    <div class="d-flex align-items-center ml-4">
      <a href="#">
        <img src="../assets/img/dreamers logo.png" width="80px;" class="mr-2">
      </a>
      <a class="navbar-brand" href="#">Project Booking App</a>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="sideheader" style="padding-right: 40px;">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0 ml-4">
      <li class="nav-item ms-2">
        <a class="nav-link" id="home1" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item ms-2">
        <a class="nav-link" id="home1" href="#feature">Features</a>
      </li>
      <li class="nav-item ms-2">
        <a class="nav-link" id="about1" href="#about">About</a>
      </li>
    </ul>
    <button class="btn btn-custom-btn ms-2" @click="openLoginModal" style="color: black;">Login</button>
    <button class="btn btn-custom-btn ms-4" @click="openRegisterModal" style="color: black;">Register</button>
  </div>
</nav>

字符串

vof42yt1

vof42yt11#

确保您已在HTML代码中包含Bootstrap CSS文件和所需的JavaScript文件。您可以通过在HTML文件的部分中添加以下行来包含它们:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.min.js"></script>

字符串

相关问题