css - Bootstrap 4 - 汉堡包菜单不会出现在移动设备上

Question

我正在使用 Bootstrap 4 开发一个应用程序。目前，我正在努力将此应用程序定位到台式机和手机上。我想要

桌面

+--------------------------------------------------------+
| This is the title of my app                   [button] |
+--------------------------------------------------------+
|                                                        |
|                                                        |
|                                                        |
|                                                        |
|                                                        |
|                                                        |
|                                                        |
+--------------------------------------------------------+

移动

+-----------------------+
| This is|          [=] |
+--------|              |
|        |     [button] |
|        |              |
|        |              |
|        |              |
|        |              |
|        |              |
|        |              |
+--------+--------------+

我有一个 Bootply here ，使用以下代码:

<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="/">Some Really Long Title Goes Here</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>        

    <div id="navbarCollapse">
      <ul class="navbar-nav mr-auto"></ul>
      <ul class="navbar-nav">
        <li class="nav-item"><a class="btn btn-outline-warning" href="#" target="_blank">Action Button</a></li>
      </ul>
    </div>                
  </div>
</nav>

<div class="container">
  <p>Here are the details of the page</p>
</div>

但出于某种原因，汉堡包菜单以全屏模式显示。我不想要的。同时，当我选择汉堡菜单时，没有出现任何选项。我做错了什么？

Answer 1

这应该可以解决您的问题。

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="/">Some Really Long Title Goes Here</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>        

    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto"></ul>
      <ul class="navbar-nav">
        <li class="nav-item"><a class="btn btn-outline-warning" href="#" target="_blank">Action Button</a></li>
      </ul>
    </div>                
  </div>
</nav>

<div class="container">
  <p>Here are the details of the page</p>
</div>

代码在 nav 元素中缺少 navbar-expand-md，在下拉区域中缺少“collapse navbar-collapse”。

希望这对您有所帮助。