Bootstrap导航栏点击Highlights按钮时被挤压的问题求助

我的导航栏采用Flex布局，使用Bootstrap下拉组件构建，点击Highlights按钮时，导航栏的其他链接会出现挤压变形的情况。相关代码如下：

<div id="links">
  <a href="index.html">Home</a>
  <a href="profile.html">About me</a>
  <a class="dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Highlights
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background: gray; z-index: 100;">
    <li><a class="dropdown-item" href="#">Basics</a></li>
    <li><a class="dropdown-item" href="#">Fundamentals</a></li>
    <li><a class="dropdown-item" href="#">Core statistics</a></li>
  </ul>  
  <a href="contacts.html">Contact</a>
  <a id="login" href="login.html">Login</a>
</div>

问题效果截图：

• 给导航容器#links添加Flex布局优化样式，确保对齐方式和间距固定：

#links {
  display: flex;
  align-items: center;
  gap: 1rem; /* 给链接间设置固定间距，避免挤压 */
}

• 给所有导航链接（包括下拉触发器）设置不可压缩和不换行属性，防止宽度变化：

#links a {
  flex-shrink: 0;
  white-space: nowrap;
}

• 建议使用Bootstrap官方标准导航栏结构，避免自定义布局冲突：

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <div class="navbar-nav" id="links">
      <a class="nav-link" href="index.html">Home</a>
      <a class="nav-link" href="profile.html">About me</a>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Highlights
        </a>
        <ul class="dropdown-menu" style="background: gray; z-index: 100;">
          <li><a class="dropdown-item" href="#">Basics</a></li>
          <li><a class="dropdown-item" href="#">Fundamentals</a></li>
          <li><a class="dropdown-item" href="#">Core statistics</a></li>
        </ul>
      </div>
      <a class="nav-link" href="contacts.html">Contact</a>
      <a class="nav-link" id="login" href="login.html">Login</a>
    </div>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者brendan gideon