html - Bootstrap 菜单图标在单击时向上移动

Question

总而言之:

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

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

在做了一些可用性测试之后，这个行为被认为是烦人的。还发现，在移动设备上关闭的导航栏上显示的“Book”按钮在打开时会移动到导航栏的底部。是否有可能阻止这种行为？当菜单打开时，我希望按钮保持在右上角。

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>