单击时引导菜单图标向上移动

Question

TLDR：

1. 如何阻止引导菜单（汉堡）图标在单击时向上移动（我需要它保持固定在导航栏上）
2. 如何定位“图书”按钮，使其在展开菜单后保持在导航栏的右上角。 （固定位置右上角）

我创建了一个在桌面上完美运行的简单引导菜单。但是在移动设备上，我得到了这种奇怪的行为 单击菜单图标时：它向上移动几个像素，然后当菜单关闭时，它会移回正常位置。

在进行了几次可用性测试后，此行为已被确定为令人讨厌。还发现移动设备上关闭的导航栏上显示的“预订”按钮在打开时会移动到导航栏的底部。是否有可能阻止这种行为？我希望按钮在菜单打开时保持在右上角。

HTML代码：

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
   <div class="container">
      <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 mr-auto">
            <li class="nav-item active">
               <a class="nav-link">Home
               <span class="sr-only">(current)</span>
               </a>
            </li>
            <li class="nav-item">
               <a class="nav-link">Vans</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">Contract</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">About</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">App</a>
            </li>
         </ul>
      </div>
      <form class="form-inline my-2 my-lg-0">
         <a class="btn btn-outline-primary btn-book my-2 my-sm-0" >Book</a>
      </form>
   </div>
</nav>

Answer 1

由于“预订”按钮，您的菜单按钮正在移动。 将它插入折叠元素之前，使用 order-lg-1 和 order-lg-2 重新排列元素，它应该可以正常工作。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
   <div class="container">
      <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>
      <form class="form-inline my-2 my-lg-0 order-lg-2">
         <a class="btn btn-outline-primary btn-book my-2 my-sm-0" >Book</a>
      </form>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto order-lg-1">
            <li class="nav-item active">
               <a class="nav-link">Home
               <span class="sr-only">(current)</span>
               </a>
            </li>
            <li class="nav-item">
               <a class="nav-link">Vans</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">Contract</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">About</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">App</a>
            </li>
         </ul>
      </div>
   </div>
</nav>