Bootstrap导航栏能否始终折叠显示汉堡按钮并全屏下拉？

当然可以实现！下面我会一步步给你讲解如何修改Bootstrap导航栏，让它始终显示汉堡按钮（不受浏览器宽度影响），并且点击后菜单全屏覆盖背景展开。

核心思路 #

Bootstrap默认会根据屏幕宽度自动切换导航栏的展开/折叠状态，我们需要：

1. 强制导航栏始终保持折叠状态，不管屏幕尺寸多大；
2. 自定义CSS样式，让展开后的菜单全屏覆盖整个视口。

实现代码（以Bootstrap 3为例） #

先补全并调整你提供的HTML结构：

<div class="container">
  <nav class="navbar navbar-default">
    <!-- 不要添加navbar-expand-*类，这类会触发大屏展开逻辑 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">你的品牌</a>
    </div>
    <!-- 添加自定义类fullscreen-collapse，方便控制全屏样式 -->
    <div class="collapse navbar-collapse fullscreen-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>
  </nav>
</div>

然后添加自定义CSS，覆盖Bootstrap默认样式并实现全屏效果：

/* 强制导航栏始终处于折叠状态，无视屏幕宽度 */
.navbar-collapse.collapse {
  display: none !important;
}

/* 点击汉堡按钮后，显示展开的菜单 */
.navbar-collapse.collapse.in {
  display: block !important;
}

/* 全屏菜单核心样式 */
.fullscreen-collapse.in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 占满整个视口高度 */
  background-color: #ffffff; /* 自定义背景色，比如换成深色#2c3e50 */
  z-index: 9999; /* 确保菜单在最顶层 */
  padding-top: 60px; /* 避开导航栏高度，防止内容被汉堡按钮遮挡 */
}

/* 优化全屏菜单内的链接样式 */
.fullscreen-collapse .nav.navbar-nav {
  width: 100%;
  text-align: center;
}

.fullscreen-collapse .nav.navbar-nav > li {
  display: block;
  margin: 15px 0;
}

.fullscreen-collapse .nav.navbar-nav > li > a {
  font-size: 24px;
  color: #333333; /* 自定义文字颜色 */
  padding: 10px 0;
}

如果你用Bootstrap 5，调整如下 #

HTML结构（类名适配Bootstrap 5）：

<div class="container">
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">你的品牌</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarFullscreen">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse fullscreen-collapse" id="navbarFullscreen">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">关于我们</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">服务</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">联系我们</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

对应的CSS：

/* 强制始终折叠 */
.navbar-collapse.collapse {
  display: none !important;
}

.navbar-collapse.collapse.show {
  display: block !important;
}

/* 全屏菜单样式 */
.fullscreen-collapse.show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f8f9fa;
  z-index: 1050;
  padding-top: 70px;
}

.fullscreen-collapse .navbar-nav {
  width: 100%;
  text-align: center;
}

.fullscreen-collapse .nav-item {
  margin: 20px 0;
}

.fullscreen-collapse .nav-link {
  font-size: 2rem;
  color: #212529;
}

注意事项 #

1. 确保你已经正确引入了Bootstrap的CSS和JS文件（Bootstrap 3需要依赖jQuery，Bootstrap 5无需jQuery）；
2. 可以根据自己的网站风格，自由调整背景色、文字大小、间距等样式；
3. 如果需要关闭菜单的动画效果，可以调整Bootstrap的折叠过渡类，或者自定义过渡属性。

内容的提问来源于stack exchange，提问作者Anderson1978north