Question

我的导航栏在较小的屏幕尺寸上折叠时，我试图添加一个按钮。我可以看到该按钮存在于开发人员工具中，但是我看不到汉堡图标，也无法单击该按钮来展开和折叠它。我正在尝试使用Bootstrap来实现这一点。

<nav class="col-6 col-md-6 navbar navbar-expand-sm">
    <button class='navbar-toggler ml-auto' type="button" data-toggle='collapse' data-target='#navBarDropdown' aria-controls="navBarDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class='navbar-toggler-icon'></span>
    </button>
    <div class="collapse navbar-collapse" id='navBarDropdown'>
        <ul class=" navbar-nav mr-auto">
            <li class="list-inline-item nav-item mr-2"><a href="index.html" class="nav-link hvr-float">Home</a></li>
            <li class="list-inline-item nav-item mr-2"><a href="about.html" class="nav-link hvr-float">About</a></li>
            <li class="list-inline-item nav-item mr-2"><a href="gallery.html" class="nav-link hvr-float">Gallery</a></li>
            <li class="list-inline-item nav-item mr-2"><a href="contact.html" class="nav-link hvr-float">Contact</a></li>
        </ul>
    </div>
</nav>

Answer 1

您应该按正确的顺序添加jquery和bootstrap。添加后，汉堡菜单运行正常。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

为什么我看不到或单击导航栏按钮？

1 个答案: