Bootstrap Navbar因添加dropdown菜单出现中间断层，如何消除该间隙？

• 导航栏DOM结构不符合Bootstrap 5规范：你将折叠容器#navbarResponsive和右侧的FAQ、搜索模块拆成了两个平级的div放在container内，Bootstrap默认给.navbar-collapse设置了flex-grow: 1属性，会自动撑满剩余空间，直接把前后两部分挤开形成断层
• 自定义Dropdown没有使用Bootstrap 5内置的组件类，额外干扰了导航栏的布局计算，同时还会导致移动端折叠状态下右侧内容无法正常显示在汉堡菜单内

1. 将右侧的FAQ、评论、搜索模块全部移入#navbarResponsive折叠容器内部，统一导航栏的内容结构
2. 替换自定义Dropdown为Bootstrap 5原生Dropdown组件，复用框架内置样式和交互逻辑，避免自定义样式冲突
3. 给搜索框添加Bootstrap原生表单类，保证和导航栏样式对齐

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Navigation Bar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container px-5">
    <a class="navbar-brand" href="#page-top">Welcome</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <!-- 原生Bootstrap Dropdown -->
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Games
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#game1">BlockBuster: The Game</a></li>
            <li><a class="dropdown-item" href="#game2">One Night Ultimate Werewolf</a></li>
            <li><a class="dropdown-item" href="#game3">Herd Mentality</a></li>
            <li><a class="dropdown-item" href="#game4">Scrawl</a></li>
            <li><a class="dropdown-item" href="#game5">Pinch ‘n’ Pass</a></li>
          </ul>
        </li>
      </ul>
      <!-- 右侧导航和搜索 全部移入折叠容器内，用ms-auto自动靠右 -->
      <ul class="navbar-nav ms-auto align-items-center">
        <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
        <li class="nav-item"><a class="nav-link" href="#Review">Leave us a Comment!</a></li>
        <li class="nav-item">
          <form id="form" class="d-flex gap-2 ms-lg-3">
            <input class="form-control" type="search" name="name" id="name" placeholder="Searching Games">
            <button class='btn btn-outline-light' type="submit">Search</button>
          </form>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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