Bootstrap 5 移动下拉菜单点击不滑动

Question

开始前需要了解的几件事：-

我正在使用 Django (python)
我正在使用 Bootstrap
显然我正在使用 html 和 css

我做了什么（按顺序，在我出错之前）：

我从 bootstrap navbar docs

navbar

我按照以下顺序从django的静态目录链接了我自己的自定义css和js文件：-

Javascript 个文件

（复制自Bootstrap，所以不要介意评论）:)

<!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="{% static '/js/script.js' %}" type="text/javascript"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"
    ></script>

Css 个文件

<link rel="stylesheet" href="{% static 'css/styles.css'%}" />
<!-- Bootstrap CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
  crossorigin="anonymous"
/>

主要 html 文件中的代码

{%load static%}
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="{% static 'css/styles.css'%}" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />

    <title>{%block title%} {%endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img
            src="{% static '/img/Socklet-logos.jpeg' %}"
            alt="error in loading static files, may encounter bad design"
            id="brand-logo"
            class="float-start"
          />
          <h1 id="brand">{%block brand%}{%endblock%}</h1></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 navbar"
        >
          <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="navigation-bar">
            <li class="nav-item" id="nav">
              <a
                class="nav-link active"
                aria-current="page"
                href="#"
                id="nav-link"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-house-door"
                  viewBox="0 0 16 16"
                  class="nav-icon"
                >
                  <path
                    d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
                  />
                </svg>
                Home</a
              >
            </li>
            <hr style="color: white" />
            <li class="nav-item" id="nav">
              <a class="nav-link" id="nav-link" href="#">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-kanban-fill"
                  viewBox="0 0 16 16"
                  class="nav-icon"
                >
                  <path
                    d="M2.5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-11zm5 2h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-5 1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3zm9-1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"
                  />
                </svg>
                Projects</a
              >
            </li>
            <hr style="color: white" />
            <li class="nav-item dropdown" id="nav">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
                id="nav-link"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-three-dots"
                  viewBox="0 0 16 16"
                  class="nav-icon"
                >
                  <path
                    d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"
                  />
                </svg>

                More
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Book Club</a></li>
                <li><a class="dropdown-item" href="#">Blog</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Our Employees</a>
                </li>
              </ul>
            </li>
          </ul>
          <div class="d-flex">
            <a href="{{login_logout_link}}">
              <button
                class="btn btn-outline-success"
                name="login"
                id="login-btn"
              >
                {{login_logout}}
              </button>
            </a>
          </div>
        </div>
      </div>
    </nav>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="{% static '/js/script.js' %}" type="text/javascript"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>

自定义 Css 文件中的代码

@media screen and (max-width: 767px) {
  .nav-icon {
    height: auto;
    width: auto;
    max-height: 40px;
    max-width: 140px;
  }
}

@media screen and (min-width: 768px) {
  .nav-icon {
    height: auto;
    width: auto;
    max-height: 50px;
    max-width: 125px;
  }
}

#nav {
  font-size: 30px;
}

#nav:hover {
  background-color: black;
  text-shadow: 500px;
}

#login-button {
  align-items: right;
}

#brand:hover {
  color: black;
}

#login-btn {
  height: 45px;
  width: 100px;
}

#nav-link {
  padding: 10px;
}

svg {
  height: 30px;
  width: 30px;
}

@media (min-width: 767px) {
  #brand {
    padding-right: 250px;
    font-size: 50px;
  }
  #brand-logo {
    padding-right: 10px;
    height: auto;
    width: auto;
    max-width: 250px;
    max-height: 90px;
  }
}

#brand-logo {
  height: auto;
  width: auto;
  max-width: 100px;
  max-height: 55px;
  padding-right: 5px;
}

#navigation-bar {
  align-items: center;
}

但这是带有 gif 的最终输出，其中我单击下拉菜单但它没有滑动:-

Answer 1

ID在：

    <div
      class="collapse navbar-collapse"
      id="navbarSupportedContent navbar"
    >

必须与 data-bs-target="#navbarSupportedContent" 具有相同的值。这就是按钮和下拉菜单 <div> 的链接方式。

尝试将其更改为 id="navbarSupportedContent"

Bootstrap 5 移动下拉菜单点击不滑动

Bootstrap 5 mobile Dropdown not sliding while clicking

html

css

frontend

navbar

bootstrap-5

开始前需要了解的几件事：-

我做了什么（按顺序，在我出错之前）：

Javascript 个文件

Css 个文件

主要 html 文件中的代码

自定义 Css 文件中的代码