Bootstrap 5菜单折叠时如何调整nav-pill尺寸使其仅包裹文字

• 基于Bootstrap 5实现滚动监听导航，通过nav-pill+active类给当前页面对应的导航项添加高亮胶囊样式
• 大屏（≥768px，md断点及以上）下显示正常，高亮胶囊仅包裹导航文字内容
• 小屏（<768px）下点击汉堡按钮展开折叠导航时，高亮的nav-pill会拉伸占满整个导航容器宽度，需要调整为和大屏表现一致
• 现有Bootstrap 4版本的解决方案不适用于Bootstrap 5框架

<!-- Bootstrap-5 资源引入 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="400" data-bs-smooth-scroll="true">
  <!-- 导航栏 -->
  <nav id="navbar" class="navbar navbar-expand-md bg-dark navbar-dark py-3 sticky-top">
    <div class="container">
      <a href="#" class="navbar-brand">Ken's Art & Frame</a>
      <button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon mid-bar"></span>
            <span class="toggler-icon bot-bar"></span>
            </button>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav nav-pills ms-auto">
          <li class="nav-item">
            <a href="#about" class="nav-link anchor">About Us</a>
          </li>
          <li class="nav-item">
            <a href="#services" class="nav-link anchor">Services</a>
          </li>
          <li class="nav-item">
            <a href="#art" class="nav-link anchor">Artwork</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link anchor">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

Bootstrap 5默认在小屏折叠导航场景下，给.navbar-nav .nav-link设置了块级显示属性，链接宽度会自动撑满父容器整行，因此nav-pill的高亮背景会随链接一起占满整个容器宽度。

不需要修改现有HTML结构，在Bootstrap样式文件之后引入一段自定义CSS即可：

/* 仅在md断点以下（小屏汉堡菜单场景）生效 */
@media (max-width: 767.98px) {
  /* 保持导航项右对齐，和大屏ms-auto的对齐效果一致 */
  .navbar-collapse .navbar-nav {
    align-items: flex-end;
  }
  /* 让导航链接宽度由内容决定，不再撑满整行 */
  .navbar-collapse .nav-link {
    display: inline-block;
  }
}

添加上述样式后，小屏展开折叠导航时，激活态的nav-pill高亮胶囊会和大屏表现一致，仅包裹导航文字内容，不会出现拉伸占满容器的问题。

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