在 Bootstrap 4 的导航栏中使用下拉菜单而不是汉堡菜单答案

【问题标题】：use a dropdown instead of a hamburger menu in a navbar in Bootstrap 4在 Bootstrap 4 的导航栏中使用下拉菜单而不是汉堡菜单
【发布时间】：2019-11-08 14:58:37
【问题描述】：

我是 Bootstrap 的新手。

在 Bootstrap 4 中，我想使用一个简单的标准导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <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="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </nav>

当导航栏在较小的视口上折叠时，我希望它显示为下拉菜单，而不是汉堡包。

如何用下拉元素替换汉堡包图标和菜单功能？

如果这很难或不可能，我也可以使用简单的基本导航

<ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>

  </ul>

在较小的视口上被 a 替换为下拉元素。

【问题讨论】：

您希望汉堡仍然在移动设备上显示，而是切换下拉菜单，还是希望整个导航显示为下拉菜单来代替汉堡？
我希望整个导航显示为下拉菜单来代替汉堡包。

标签： html twitter-bootstrap bootstrap-4 navigation

【解决方案1】：

最简单的方法是使用下拉菜单上的显示d-lg-none，但您需要为每个“版本”设置重复的菜单...

选项 1

下拉菜单代替切换器。使用下拉菜单代替移动导航...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="dropdown d-lg-none">
        <div class="dropdown-menu show" aria-labelledby="dropdownMenu1">
            <a class="dropdown-item" href="#">Home</a>
            <a class="dropdown-item" href="#">Features</a>
            <a class="dropdown-item" href="#">Pricing</a>
        </div>
    </div>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <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="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
    </div>
</nav>

演示：https://www.codeply.com/p/xohg1kOKji

选项 2

使用下拉菜单代替移动导航...

演示：https://www.codeply.com/p/y9DBBlGlZO

【讨论】：

谢谢！但是，这直接显示打开的下拉列表，而不是仅在用户单击它时打开列表的下拉按钮。
这正是我之前问的......“我希望整个导航显示为下拉菜单来代替汉堡包”..所以你想要一个按钮来切换下拉菜单用于代替汉堡包而不是整个菜单
无论如何概念都差不多：codeply.com/p/y9DBBlGlZO

【解决方案2】：

<span class="navbar-toggler-icon"></span>
此代码用于显示图标。由于 bootstrap 4 没有图标，请使用 fontawesome 图标。

将此包含在 head 块中
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

并将上面的行替换为
@987654323 @

【讨论】：

谢谢。这确实显示了向下角度按钮而不是汉堡按钮。但它并没有提供像
这样的真正下拉元素