如何使折叠菜单触发后Sign in、Sign up元素保持固定位置？

我懂你的需求——点击汉堡按钮折叠菜单时，"Sign in"和"Sign up"总是跟着菜单跑，你想让它们一直固定在右侧的位置对吧？

问题出在当前的布局结构上：你的登录注册链接和折叠菜单都放在同一个.container里，当屏幕尺寸小于md（768px）时，Bootstrap的折叠菜单会收缩，容器内的元素布局会重新排列，导致这两个链接被挤到菜单下方。

咱们用Bootstrap的flex布局工具类就能快速搞定，修改后的代码如下：

<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
     <div class="container d-flex justify-content-between align-items-center">
              <button class="navbar-toggler" data-toggle="collapse" data-target="#ourNav">
                      <i class="navbar-toggler-icon"></i>
             </button>
             <a href="" class="navbar-brand"> online exam </a>

             <div class="collapse navbar-collapse justify-content-center" id="ourNav">
                   <ul class="navbar-nav">
                       <li class="nav-item"><a href="" class="nav-link">Home</a></li>
                       <li class="nav-item"><a href="" class="nav-link">Your Profile</a></li>
                       <li class="nav-item"><a href="" class="nav-link">Exam</a></li>
                       <li class="nav-item"><a href="" class="nav-link">About Us</a></li>
                       <li class="nav-item "><a href="" class="nav-link">Contact</a></li>
                   </ul>
             </div>

             <section class="d-flex">     
                <a href="sign_in.php" class="nav-link text-light">Sign in</a>
                <a href="sign_up.php" class="nav-link text-light">Sign up</a>
             </section>   
      </div>
</nav>

关键修改说明： #

1. 给外层的.container添加了d-flex justify-content-between align-items-center：
   • d-flex让容器内的元素使用flex布局
   • justify-content-between让汉堡按钮、品牌Logo、折叠菜单、登录链接两端对齐，登录链接自然固定在右侧
   • align-items-center保证所有元素垂直居中，布局更协调
2. 把登录注册区域的class="nav"改成d-flex，让两个链接保持横向排列，避免小屏幕下垂直堆叠

如果你的项目用的是Bootstrap 5，记得把data-toggle改成data-bs-toggle，data-target改成data-bs-target，不然汉堡按钮可能无法正常触发折叠效果~

要是小屏幕下觉得登录链接字体太大，还可以加个响应式字体类调整大小，比如fs-6：

<a href="sign_in.php" class="nav-link text-light fs-6">Sign in</a>

内容的提问来源于stack exchange，提问作者Himel shipu