Question

TLDR：

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

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

在进行了一些可用性测试之后，这种行为被确定为令人讨厌。还可以确定，在移动设备上已关闭的导航栏上显示的“预订”按钮在打开时会移动到导航栏的底部。是否可以停止这种行为？我希望当菜单打开时，按钮保持在右上方。

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>

单击后，Bootstrap菜单图标会向上移动

1 个答案: