如何将Bootstrap navbar中的某一个链接对齐到导航栏末尾

Bootstrap 5 版本操作 #

给需要右对齐的最后一个导航项的父元素/导航项本身添加ms-auto（margin-left: auto）类即可，示例代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌标识</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">功能</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">定价</a>
        </li>
        <!-- 最后一个导航项加ms-auto实现右对齐 -->
        <li class="nav-item ms-auto">
          <a class="nav-link" href="#">登录</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

如果有多个导航项需要整体右对齐，将所有需要右对齐的项放在同一个<ul>标签中，给这个<ul>添加ms-auto类即可。

Bootstrap 4 版本操作 #

操作逻辑和Bootstrap 5一致，只需将ms-auto替换为ml-auto类即可，示例代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">品牌标识</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">功能</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">定价</a>
        </li>
        <li class="nav-item ml-auto">
          <a class="nav-link" href="#">登录</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

注意事项 #

• 不要修改navbar默认的display: flex布局属性，该属性是margin: auto实现剩余空间自动分配的前提
• 如果仅需要在大屏幕下实现右对齐、小屏幕折叠菜单中保持默认排序，可以配合响应式类使用，比如ms-lg-auto仅在lg及以上尺寸生效

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