导致Bootstrap Navbar在移动浏览器上与在桌面浏览器上具有相同功能的问题

问题描述

在获取此版本的移动版本以复制桌面版本时遇到问题。在移动浏览器上，导航菜单在切换菜单时会将整个导航栏推开。在桌面浏览器上，它可以按预期运行，并在导航栏下方显示一个下拉菜单。

我注意到，如果将navContainer的</div>标签移动到折叠窗格的<div>开始位置的上方，它现在显示在导航栏的下方，但是导航栏徽标和切换方式存在样式问题打开导航窗格时，按钮将向上和向下移动。此外，导航窗格现在在其顶部具有填充，而不会使其与导航栏保持流畅。

我猜想移动</div>标签会是理想的选择，我需要为navpane添加一些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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4 reactjs reactjs