时间戳

首页 > 解决方案 > 为什么单击图标时导航栏不会折叠/展开？

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

问题描述

我正在为我的导航栏使用引导程序，以便在单击图标时使链接列表折叠并增长，但我似乎无法让它工作。我想我所有的 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>

标签： htmlcsstwitter-bootstrapbootstrap-4nav

解决方案

我不确定是什么问题？你包括引导库吗？

<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>

推荐阅读