如何将导航栏切换器与 Bootstrap 仪表板一起使用？答案

【问题标题】：How can I use the navbar toggler with a Bootstrap dashboard?如何将导航栏切换器与 Bootstrap 仪表板一起使用？
【发布时间】：2020-04-11 10:18:35
【问题描述】：

我正在尝试使用 Creative Tim 的 Bootstrap Material Dashboard 创建一个管理面板。

我已经设置好了所有内容，但是当尝试在较小的屏幕上使用它时，导航栏切换器不起作用，因此您无法浏览页面。我已经在下面包含了导航栏代码，感谢您的帮助。

      <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
        <div class="container-fluid">
          <div class="navbar-wrapper">
            <a class="navbar-brand" href="javascript:;">Dashboard - <?=$_SESSION['name']?></a>
          </div>
          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation" data-target="#mobileNav">
            <span class="navbar-toggler-icon icon-bar"></span>
            <span class="navbar-toggler-icon icon-bar"></span>
            <span class="navbar-toggler-icon icon-bar"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end">
                        <button type="button" class="btn btn-default">
                            <a href="./logout.php">
                                Log out
                            </a>
                        </button>
            <ul class="navbar-nav">
              <!-- your navbar here -->
            </ul>
          </div>
        </div>
      </nav>

【问题讨论】：

标签： javascript html bootstrap-4 navigation

【解决方案1】：

替换这个：

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation" data-target="#mobileNav">

有了这个：

<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">

【讨论】：

我最好的建议是再次检查代码。由于我们没有您的完整代码，我们无法猜测这里发生了什么。可能是多件事或只是一件事。尝试再次下载原始文件并与您的文件进行比较以找出问题所在。