Question

所以我正在学习 Udemy 的教程，我们被要求创建一个导航栏，但是教程是在 Bootstrap4 中，我显然想学习 Bootstrap5，所以我不知道我还能如何更改代码使其工作除了 ml-auto 到 ms-auto 和 data-target 到 data-bs-target 等...

<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

</head>

<body>

  <section id="title">

    <!-- Nav Bar -->
    <nav class="navbar bg-dark navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">Tindog</a>
         <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 class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
            <li class="nav-item">
                <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Download</a>
            </li>
        </ul>
     </div>
    </nav>

</body>
</html>

Answer 1

已修复..我很愚蠢 :D 我有 data--bs-target 而不是 data-bs-target

Answer 2

数据--bs-目标

您添加了双破折号并为部分添加了结束标记。

Answer 3

在标签中，有“data--bs-target”属性。 “data”后面应该有“data-bs-target”和一个连字符。

附言在您的 HEAD 标签中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 以获得更好的移动版本效果。

知道为什么我的下拉菜单在 Bootstrap5 中不起作用吗？

3 个答案: