时间戳

首页 > 解决方案 > 为什么我的引导导航栏按钮没有在移动设备上显示导航项目？

bootstrap-4 - 为什么我的引导导航栏按钮没有在移动设备上显示导航项目？

问题描述

我正在尝试创建一个引导导航栏。我已经使用这个站点的代码来实现它。它主要是工作。导航项目正在显示，当我缩小到移动尺寸时，导航栏会折叠，但是当我尝试按下移动设备上的按钮时，菜单/导航按钮不显示。

这是原始代码（从页面的源代码复制而不是页面上显示的代码）：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse show" id="navbarSupportedContent" style="">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

这是从我的页面编译的 html：

<html>
  <head>
    <title>Express</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Tara Bryn</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active"> 
            <a class="nav-link" href="#">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Projects</a>
          </li>
        </ul>
        <!--form.form-inline.my-2.my-lg-0input.form-control.mr-sm-2(
          type='search'
          placeholder='Search'
          aria-label='Search'
        )
          button.btn btn-outline-success.my-2.my-sm-9(type='submit') Search-->
      </div>
    </nav>
    <div class="jumbotron jumbotron-fluid" id="hero-jumbotron">
      <div class="container">
        <h1 class="display-4">Welcome!</h1>
        <p class="lead">My name is Tara. I am a full stack developer.</p>
        <hr class="my-4">
        <a class="btn btn-primary btn-lg" href="#">Client login</a>
      </div>
    </div>
  </body>
</html>

我没有看到代码有任何问题。事实上，当我从网站上复制并过去的源代码时，它仍然不起作用，但它在网站上工作，我不确定我做错了什么。我知道引导程序正在工作，因为它的风格化正确。我正在使用4.4.1 版的编译代码下载，这是我的导入：

@import '../bootstrap-4.4.1-dist/css/bootstrap.min.css';
@import '../bootstrap-4.4.1-dist/css/bootstrap-grid.min.css';
@import '../bootstrap-4.4.1-dist/css/bootstrap-reboot.min.css';

标签： bootstrap-4navbar

解决方案

确保您的页面中包含 jQuery 和 Bootstrap JavaScript -此处的说明，但这是您需要在结束</body>标记之前添加的代码：

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

推荐阅读