Bootstrap navbar-expand小屏幕宽度不自适应问题及解决方法

问题原因分析 #

1. 版本属性不兼容：你用的是Bootstrap 4.2，但代码里误用了Bootstrap 5专属的data-bs-toggle、data-bs-target属性，Bootstrap 4对应的属性是data-toggle和data-target——这会导致导航栏折叠功能失效，小屏幕下内容无法收起，直接溢出屏幕。
2. 缺少响应式断点控制：单纯用navbar-expand类会让导航栏在所有屏幕尺寸下保持展开，不会触发折叠逻辑，iPad这类中等屏幕宽度不足以容纳所有导航项，自然会溢出。
3. 自定义容器无响应式处理：你自定义的flexcontainerbaskets容器没做小屏幕适配，固定宽度设置会进一步挤压导航空间，加剧溢出问题。

解决方案 #

1. 修正Bootstrap属性 #

把所有data-bs-前缀的属性替换为Bootstrap 4的data-前缀：

• data-bs-toggle → data-toggle
• data-bs-target → data-target

2. 添加响应式断点类 #

将navbar-expand替换为navbar-expand-lg，这样导航栏会在屏幕宽度小于992px（iPad竖/横屏临界尺寸）时自动折叠，触发汉堡菜单：

<nav class="navbar navbar-expand-lg" style="background-color: #02767c;">

3. 优化自定义容器的响应式布局 #

给flexcontainerbaskets添加Bootstrap的flex响应式类，让按钮在小屏幕自动换行；同时用Bootstrap栅格类替换固定宽度设置：

<div class="flexcontainerbaskets d-flex flex-wrap w-100">
  <div class="col-6 mb-2">
    <!-- 按钮容器内容 -->
  </div>
  <div class="col-6 mb-2">
    <!-- 按钮容器内容 -->
  </div>
</div>

4. 可选：强制导航栏全屏宽度 #

如果以上调整后仍有宽度问题，可添加自定义CSS强制导航栏占满屏幕：

.navbar {
  width: 100% !important;
  overflow-x: hidden;
}

修改后的完整代码 #

<nav class="navbar navbar-expand-lg" style="background-color: #02767c;">
    <div class="container-fluid">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                  <img src="./assets/img/testlogothumbnail.gif">
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#" onclick="logout()">Log out</a></li>
                </ul>
        </li>
      </ul>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
              <a class="nav-link" routerLink="/overzichtproducten">Overzicht Producten</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" routerLink="/bonnenoverzicht">Overzicht Bonnen</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/addConsignatiebon">Bon toevoegen</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" routerLink="/gebruikersoverzicht">Gebruikers Overzicht</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" routerLink="/addgebruiker">Gebruiker Toevoegen</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              Beheren
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" routerLink="/eigenschappenoverzicht">Eigenschappen</a></li>
              <li><a class="dropdown-item" routerLink="/merkenoverzicht">Merken</a></li>
              <li><a class="dropdown-item" routerLink="/matenoverzicht">Maten</a></li>
              <li><a class="dropdown-item" routerLink="/kleurenoverzicht">Kleuren</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" routerLink="/export">Exporteren</a></li>
            </ul>
          </li>
          <li class="nav-item">
              <a class="nav-link" routerLink="/webshopOverzicht">Webshop</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" routerLink="/mailing">Mailing</a>
          </li>
        </ul>

        <div class="flexcontainerbaskets d-flex flex-wrap w-100">
          <div class="col-6 mb-2">
            <form class="d-flex justify-content-center" role="search">
              <button class="btn btn-outline-dark" type="submit" (click)="calculateAndPayOut()">
                <div>
                  <fa-icon class="fa-3x" [icon]="faHandHoldingDollar"></fa-icon>
                </div>
                Uitbetalen
              </button>
            </form>
          </div>

          <div class="col-6 mb-2">
            <form class="d-flex justify-content-center" role="search">
              <button class="btn btn-outline-dark" type="submit" (click)="calculateAndSell()">
                    <div>
                      <fa-icon class="fa-3x" [icon]="faBasketShopping"></fa-icon>
                    </div>
                    Winkelmand
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </nav>

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