bootstrap DropDown 不显示任何内容答案

【问题标题】：bootstrap DropDown doesn show anythingbootstrap DropDown 不显示任何内容
【发布时间】：2021-02-08 00:21:38
【问题描述】：

我需要帮助我找不到问题出在哪里，下拉菜单的箭头图标显示，但是当我点击它时没有显示任何帮助。

<div class="collapse navbar-collapse justify-content-center rigths " id="navbarLinks">
        <ul class="navbar-nav ">
            <li class="nav-item">
                <a href="#home" class="nav-link ">Home</a>
            </li>
            <li class="nav-item ">
                <a href="#skills" class="nav-link ">Skills</a>
            </li>
            <li class="nav-item ">
                <a href="#about" class="nav-link ">About</a>
            </li>
            <li class=" nav-item dropdown">
                <a class=" dropdown-toggle nav-link " data-toggle="dropdown"  href="#Projects" >Projects
                <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a role="menuitem" href="#">Project 1</a></li>
                    <li><a role="menuitem" href="#">Project 2</a></li>
                    <li><a role="menuitem" href="#">Project 3</a></li>
                  </ul>
            </li>
            <li class="nav-item ">
                <a href="#contact" class="nav-link ">Contact Me</a>
            </li>
        </ul>
    </div>
</nav>

【问题讨论】：

显示您的页面的完整代码，这将给出问题所在。
您在答案中添加了您的代码，如果您指的是项目箭头，则箭头正在工作
什么，它对我不起作用，它不会打开带有 3 个选项的菜单

标签： css bootstrap-4 drop-down-menu

【解决方案1】：

我什么都没改变，试试它的工作原理

<!doctype html>
    <html lang="en">

    <head>
        <!-- Required meta tags -->
        <title>My First Bootstrap Website</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- Google fonts CSS -->
        <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
        <!-- Font Awesome CSS -->
        <script src="https://kit.fontawesome.com/1e80d5af25.js" crossorigin="anonymous"></script>
        <!---font-->
        <link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">

        <!-- My CSS -->
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-6 col-sm-8 col-md-9 col-lg-10 col-xl-10 bg-secondary">
                    <i class="fab fa-facebook iconh" ></i>
                    <i class="fab fa-instagram iconh" ></i>
                    <i class="fab fa-twitter iconh"></i>
                    <i class="fab fa-linkedin iconh"></i>
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 bg-secondary">
                    <h1 class="rigths">All rights reserved</h1>
                </div>
            </div>
        </div>
        </div>
            
        <!-- navbar -->
        <nav class="navbar py-3 navbar-dark navbar-expand-sm bg-dark">
            <!-- logo -->
            <a href="#" class="navbar-brand h1">
                <h1><i class="fas fa-gamepad fa-lg"></i> Gamer</h1>
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks">
              <span class="navbar-toggler-icon text-primary"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-center rigths " id="navbarLinks">
                <ul class="navbar-nav ">
                    <li class="nav-item">
                        <a href="#home" class="nav-link ">Home</a>
                    </li>
                    <li class="nav-item ">
                        <a href="#skills" class="nav-link ">Skills</a>
                    </li>
                    <li class="nav-item ">
                        <a href="#about" class="nav-link ">About</a>
                    </li>
                    <li class=" nav-item dropdown">
                        <a class=" dropdown-toggle nav-link " data-toggle="dropdown"  href="#Projects" >Projects
                        <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a role="menuitem" href="#contato ">Page 1-1</a></li>
                            <li><a role="menuitem" href="#contacto">Page 1-2</a></li>
                            <li><a role="menuitem" href="#contato">Page 1-3</a></li>
                          </ul>
                    </li>
                    <li class="nav-item ">
                        <a href="#contact" class="nav-link ">Contact Me</a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- end of navbar -->


      

     <!-- footer section -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-6 col-sm-8 col-md-9 col-lg-10 col-xl-10 bg-secondary">
                    <i class="fab fa-facebook iconh" ></i>
                    <i class="fab fa-instagram iconh" ></i>
                    <i class="fab fa-twitter iconh"></i>
                    <i class="fab fa-linkedin iconh"></i>
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 bg-secondary">
                    <h1 class="rigths"> @copyrigth 2020 :Gamer</h1>
                </div>
            </div>
        </div>
        </div>
        </footer>
        <!-- end of footer section -->

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

【讨论】：