猿问

Bootstrap 4 汉堡菜单不显示导航栏

这是针对我的手机大小的网站。当我单击汉堡菜单时，导航栏不出现。我的data-target匹配nav id所以我不确定为什么它不起作用。


<section id="nav">

        <nav class="navbar navbar-light navbar-expand-md py-2">

            <a href="index.html">

                <img src="./img/logo.png" class="img-fluid mw-121 height: auto" alt="Logo">

            </a>

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

                    class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarLinks">

                <ul class="nav">

                    <li class="nav-item">

                        <a class="nav-link" href="index.html">Home</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="flavors.html">Flavors</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="details.html">What's Included</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="reserve.html">Reserve Today</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="faq.html">FAQ</a>

                    </li>

                </ul>

            </div>

        </nav>

    </section>


一只萌萌小番薯
浏览 106回答 1
1回答

蝴蝶不菲

我已经使用您的代码来复制该问题，但工作正常。检查下面的代码，您可能缺少依赖项之一。<!DOCTYPE html><html><head>&nbsp; <title>Bootstrap</title>&nbsp; <meta charset="utf-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>&nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script></head><body>&nbsp; &nbsp; <section id="nav">&nbsp; &nbsp; &nbsp; &nbsp; <nav class="navbar navbar-light navbar-expand-md py-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="index.html">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Test Image here</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="navbar-toggler-icon"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="collapse navbar-collapse justify-content-end" id="navbarLinks">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="index.html">Home</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="flavors.html">Flavors</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="details.html">What's Included</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="reserve.html">Reserve Today</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="faq.html">FAQ</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; </section></body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答