如何让Bootstrap导航栏在任意屏幕尺寸下始终保持折叠状态？

Bootstrap 5 处理方法 #

• 移除导航栏上所有带navbar-expand-*的类（比如navbar-expand-lg、navbar-expand-md），只保留navbar基础类。
• 确保折叠容器（navbar-collapse）默认不添加show类，同时让触发按钮的data-bs-target和折叠容器的id对应绑定。
  示例代码：

<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggleExternalContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

关键就是不要加任何navbar-expand-*类，这样不管屏幕尺寸多大，导航栏都会保持折叠状态，只有点击切换按钮才会展开。

Bootstrap 4 处理方法 #

• 同样移除导航栏上所有navbar-expand-*类，只保留基础的navbar类。
• 折叠容器用collapse navbar-collapse，触发按钮的data-target绑定对应容器的id，aria-expanded设为false。
  示例代码：

<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</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 class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

核心操作就是删掉所有navbar-expand-*类，这类是控制导航栏在指定屏幕尺寸下自动展开的关键。

额外提醒 #

• 如果自己写了自定义CSS，别给navbar-collapse加display: block !important这类强制显示的规则，不然会覆盖折叠效果。
• 检查触发按钮的属性是否正确，比如Bootstrap5用data-bs-toggle，Bootstrap4用data-toggle，对应的id要和折叠容器一致。

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