Question

我正在为我的导航栏使用引导程序，以使链接列表在单击该图标时折叠并增加，但是我似乎无法使其正常工作。我想我拥有所有匹配的ID，但一定要错过。

<nav class="navbar navbar-expand-lg bg-dark navbar-dark d-flex" style="background-color:#7E0B2A !important;">
    <!-- Logo -->

    <a>
        <img src="images/scc1logo3.jpg" class="d-none d-lg-block" style="max-height:80px; max-width:80px;">
    </a>

    <div class="d-lg-none d-block" style="color:white; font-size: 1.3rem;">
        Company Name
    </div>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse align-items-left justify-content-between" id="collapsibleNavbar">
        <ul class="navbar-nav text-left d-flex justify-content-center">
            <li class="nav-item pl-lg-1">
                <a class="nav-link" style="color:white;" href="index.html">Home</a>
            </li>
            <li class="nav-item pl-lg-1">
                <a class="nav-link" style="color:white;" href="about.html">About SCC</a>
            </li>
            <li class="nav-item pl-lg-1">
                <a class="nav-link" style="color:white;" href="Project.html">Projects</a>
            </li>
            <li class="nav-item pl-lg-1">
                <a class="nav-link" style="color:white;" href="Collaborators.html">Collaborators</a>
            </li>

            <li class="nav-item pl-lg-1">
                <a class="nav-link" style="color:white;">Calender</a>
            </li>
            <li class="nav-item pl-lg-1">
                <a class="nav-link" style="color:white;">Contact Us</a>
            </li>
            <li class="nav-item pl-lg-1 d-block d-lg-none">
                <a class="nav-link" style="color:white;">Donate</a>
            </li>                       
        </ul>
        <div class="d-lg-block d-none">
            <a class="nav-link" style="color:white;">Donate</a>
        </div>
    </div>
</nav>

Answer 1

我不确定是什么问题？您是否包含引导程序库？

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark d-flex" style="background-color:#7E0B2A !important;">
    <!-- Logo -->

    <a>
      <img src="images/scc1logo3.jpg" class="d-none d-lg-block" style="max-height:80px; max-width:80px;">
    </a>

    <div class="d-lg-none d-block" style="color:white; font-size: 1.3rem;">
      Company Name
    </div>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse align-items-left justify-content-between" id="collapsibleNavbar">
      <ul class="navbar-nav text-left d-flex justify-content-center">
        <li class="nav-item pl-lg-1">
          <a class="nav-link" style="color:white;" href="index.html">Home</a>
        </li>
        <li class="nav-item pl-lg-1">
          <a class="nav-link" style="color:white;" href="about.html">About SCC</a>
        </li>
        <li class="nav-item pl-lg-1">
          <a class="nav-link" style="color:white;" href="Project.html">Projects</a>
        </li>
        <li class="nav-item pl-lg-1">
          <a class="nav-link" style="color:white;" href="Collaborators.html">Collaborators</a>
        </li>

        <li class="nav-item pl-lg-1">
          <a class="nav-link" style="color:white;">Calender</a>
        </li>
        <li class="nav-item pl-lg-1">
          <a class="nav-link" style="color:white;">Contact Us</a>
        </li>
        <li class="nav-item pl-lg-1 d-block d-lg-none">
          <a class="nav-link" style="color:white;">Donate</a>
        </li>
      </ul>
      <div class="d-lg-block d-none">
        <a class="nav-link" style="color:white;">Donate</a>
      </div>
    </div>
  </nav>
</body>

单击图标时，导航栏为什么不折叠/展开？

1 个答案: