本文详解如何使用 bootstrap 原生工具类（无需自定义 css）精准控制 navbar 中某一个 `
在 Bootstrap 4/5 的 navbar 布局中，navbar-nav 默认采用 flex-direction: row 和 justify-content: flex-start，因此所有 <li> 会自然左对齐。若想仅让某一项（如 Contact）右对齐，关键在于不修改整个 <ul> 的对齐方式（否则所有项都会右移），而是利用 Flexbox 的自动外边距机制——为该 <li> 添加 ms-auto（Bootstrap 5）或 ml-auto（Bootstrap 4）类，即可将其“推至右侧”，而其他项仍保持原位置。
✅ 正确做法（推荐，纯 Bootstrap，无额外 CSS）：
将目标 <li>（即 Contact 项）单独移出主 <ul>，放入第二个 <ul>，并为其添加 navbar-nav ms-auto 类（Bootstrap 5）或 navbar-nav ml-auto（Bootstrap 4）。这是 Bootstrap 官方推荐的语义化方案，兼容折叠菜单与响应式断点。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/circle_r.png" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- 左侧导航项 -->
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tenant.html">Login/Sign-Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="proprietor.html">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
<!-- 右侧独立导航项（仅 Contact） -->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>⚠️ 注意事项：
- ❌ 不要给整个 <ul> 加 ms-auto 并依赖 justify-content: flex-end：这会使所有 <li> 一起右移，违背“仅 Contact 右对齐”的需求；
- ❌ 避免在 <li> 上直接使用 float-right 或 text-right：在 Flex 容器中无效，且破坏 navbar 的 Flex 布局逻辑；
- ✅ ms-auto（margin-start auto）作用于 <li> 时，在 Flex 容器中会自动填充左侧剩余空间，从而将该项“挤到最右”，是语义清晰、响应式友好的标准解法；
- ? 若使用 Bootstrap 4，请将 ms-auto 替换为 ml-auto（margin-left auto），并确保引入的是 Bootstrap 4.6+ 版本；
- ? 在小屏幕折叠状态下，所有 <ul> 会垂直堆叠，ms-auto 仍生效，Contact 项将在折叠菜单底部保持右对齐（视觉上更合理）。
总结：通过拆分 <ul> 并为右侧项容器添加 ms-auto，你既能精准控制单个导航项的位置，又完全遵循 Bootstrap 的设计规范，代码简洁、可维护性强，且天然支持响应式行为。
