如何在桌面端和移动端均显示Bootstrap Hamburger Menu？

完全可行，只需对现有Bootstrap导航代码做两处关键修改即可实现需求：

核心修改步骤 #

• 移除展开触发类：Bootstrap的navbar-expand-md类会在屏幕宽度≥768px时自动展开导航栏，删掉这个类就能让导航栏在所有尺寸下保持折叠状态，汉堡按钮始终显示。
• 固定按钮到右侧：通过Bootstrap的flex布局类，让汉堡按钮固定在屏幕右侧。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
    crossorigin="anonymous"
  />
  <title>Responsive Header</title>
</head>
<body>
  <!-- 移除navbar-expand-md，添加justify-content-between实现左右布局 -->
  <nav class="navbar navbar-light bg-light justify-content-between">
    <a class="navbar-brand" href="#">Home</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">
          <a class="nav-link" href="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sign</a>
        </li>
      </ul>
    </div>
  </nav>

  <script
    src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

额外说明 #

• 你之前自定义的jQuery代码可以删掉，Bootstrap自带的data-toggle="collapse"和data-target属性已经能实现汉堡按钮的点击折叠/展开功能，无需额外JS。
• 如果需要调整折叠菜单的样式（比如宽度、背景色），可以自定义CSS覆盖Bootstrap的默认样式。

内容的提问来源于stack exchange，提问作者TSCAmerica.com