在Bootstrap的导航栏组件中，默认所有菜单项会按照从左到右的顺序排列，如果只需要将某一个菜单项比如Contact单独右对齐，其余菜单项保持左对齐，需要结合Bootstrap的布局特性和相关工具类来实现，下面介绍几种常用的实现方式。
方案一：使用Bootstrap的flex布局工具类
Bootstrap 4及以上版本基于flex布局构建导航栏，我们可以利用ms-auto（margin-left:auto）工具类来实现单个菜单项右对齐的效果。将ms-auto添加到需要右对齐的菜单项所在的li或者nav-item容器上，浏览器会自动将该元素推到最右侧。
以下是完整的导航栏代码示例：
<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" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航栏">
<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>
<!-- 给Contact菜单项添加ms-auto类实现右对齐 -->
<li class="nav-item ms-auto">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
方案二：拆分导航栏的ul容器
如果不想使用flex相关的工具类，也可以将导航栏的菜单项拆分成两个ul容器，第一个ul放置左对齐的菜单项，第二个ul放置需要右对齐的单个菜单项，给第二个ul添加ms-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" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航栏">
<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>
</ul>
<!-- 右对齐的单个Contact菜单项 -->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
方案三：自定义CSS样式实现
如果需要更灵活的控制，也可以自定义CSS样式来实现单个菜单项右对齐。首先给需要右对齐的菜单项添加一个自定义的类名，比如right-align-item，然后在CSS中设置该类的样式。
CSS代码示例：
/* 自定义右对齐菜单项样式 */
.right-align-item {
margin-left: auto !important;
}
对应的HTML代码：
<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" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航栏">
<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>
<li class="nav-item right-align-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
注意事项
- 如果使用Bootstrap 3版本，flex布局工具类不适用，需要使用
navbar-right类，但该类会让整个导航组右对齐，若仅单个菜单项右对齐，建议升级到Bootstrap 4及以上版本，或者自定义样式实现。 - 添加
ms-auto类时，要确保导航栏的父容器是flex布局，Bootstrap的navbar-collapse和navbar-nav默认已经是flex布局，所以直接添加即可生效。 - 移动端收缩导航栏时，右对齐的菜单项会恢复为正常排列顺序，不会保持右对齐，这是符合移动端交互逻辑的正常表现。