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而且＆＃34;折叠导航栏崩溃＆＃34;在下拉区域。

希望这有帮助。

Bootstrap 4 - 汉堡包菜单不会出现在手机上

1 个答案: