html - 导航栏“按钮”不会在移动设备上展开（无 JavaScript/JQuery）

Question

我有一个在计算机上看起来像这样的导航栏。在移动设备上，home和contact选项会自动隐藏，并且右上角会出现一个按钮。它是三个水平线，旨在单击以展开home和contact选项。
但是，当我单击移动设备上的按钮时，它不会扩展选项。它什么都不做（只显示通过在它周围渲染一个黄色框来单击它）。

我的导航栏代码：

<nav class="navbar fixed-top navbar-expand-lg navbar-dark" data-toggle="collapse" style="background-color: steelblue; text-color: white;">

  <div class="container">
    <a class="navbar-brand" style="text-align: left;" href="index.html">
      <div style="font-family: MyWebFont;;"><b>My website</b></div>
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
      data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

标签： htmlbootstrap-4