Bootstrap 5导航栏首<li>左浮其余项右浮的实现方法咨询

给包含下载按钮的<li>添加me-auto类，就能实现导航栏展开时按钮左浮、其余导航项右浮的效果，同时保证汉堡菜单状态下按钮会和其他项一起折叠：

修改后的完整代码：

<nav class="navbar navbar-expand-md">
  <button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="main-navigation">
    <ul class="navbar-nav">
      <li class="me-auto">
        <a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

原理说明 #

Bootstrap 5的.navbar-nav是flex布局容器，.me-auto类会给元素设置margin-right: auto——在flex布局中，这个属性会让元素自动占据左侧空间，把右侧所有导航项挤到容器右端，刚好匹配你的布局需求。

另外，由于下载按钮放在.navbar-collapse内部，当屏幕尺寸小于md（768px）时，它会和其他导航项一起被折叠到汉堡菜单里，解决了你之前遇到的按钮不折叠问题。

如果需要调整按钮和导航项之间的间距，给按钮的<li>添加.me-3这类margin工具类即可，不会影响整体布局逻辑。

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