Reactjs 使引导导航栏在移动浏览器上的功能与在桌面浏览器上的功能相同时遇到问题

我在获取此的移动版本以复制桌面版本时遇到问题。在移动浏览器上，切换菜单时，“导航窗格”会将整个导航栏向上推到视图之外。在桌面浏览器上，它按预期运行，在导航栏下面显示一个下拉菜单

我注意到，如果我将navContainer的

标记移动到折叠窗格的

开始位置的正上方，它现在会显示在navbar下方，但在打开nav窗格时，navbar徽标和切换按钮会上下移动，因此会出现样式问题。此外，导航窗格现在在其顶部有一个填充物，而不是使其与导航栏一起流动

我猜移动

标签将是理想的选择，我需要添加一些CSS以使导航窗格保持与导航栏底部的连接，并限制导航栏徽标和切换按钮的移动。 提前谢谢。如果需要更多的问题描述，请告诉我

<nav class="navbar navbar-dark bg-dark">
  <div class="container" id="navContainer">
    <img src={logo} width="50" height="50" alt=""/>
    <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">
          <InputGroup size="sm" className="mb-3">
            <InputGroup.Prepend>
              <InputGroup.Text id="inputGroup-sizing-sm">Public Key</InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl id="nameTextBox" type="input" aria-label="Small" aria-describedby="inputGroup-sizing-sm" autocomplete="off"/>
          </InputGroup>
        </li>
        <li class="nav-item">
          <InputGroup size="sm" className="mb-3">
            <InputGroup.Prepend>
              <InputGroup.Text id="inputGroup-sizing-sm">Name</InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl id="addressTextBox" type="input" aria-label="Small" aria-describedby="inputGroup-sizing-sm" autocomplete="off"/>
          </InputGroup>
        </li>
        <li class="nav-item"></li>
        <li class="nav-item"></li>
      </ul>
    </div>
  </div>
</nav>

公钥


名称