本文详解如何使用 bootstrap 内置工具类（如 `ml-auto` 或 `ms-auto`）配合 flex 布局逻辑，精准地将导航栏中的某一个 `
在 Bootstrap 的响应式导航栏（.navbar-nav）中，所有 <li> 默认沿主轴（水平方向）从左到右依次排列。若想仅将其中某一项（如“Contact”）右对齐，关键不在于给该 <li> 加样式，而在于利用 Flex 布局的“自动外边距”机制，在它之前插入一个“占位分隔元素”或直接对整个 <ul> 应用弹性对齐控制。
Bootstrap 5+ 推荐使用 ms-auto（margin-start auto），而 Bootstrap 4 使用 ml-auto（margin-left auto）。二者本质相同：为紧邻其前的元素设置自动外边距，从而将后续所有子元素“挤”向容器末端。因此，正确做法是：
✅ 将 ms-auto（或 ml-auto）类添加到 <ul class="navbar-nav"> 上 —— 这会让整个列表内的所有 <li> 右对齐；
❌ 但若只想让最后一个 <li>（Contact）右对齐，其余保持左对齐，则需拆分导航结构：使用两个独立的 <ul>，并为第二个 <ul> 添加 ms-auto。
以下是推荐的、语义清晰且兼容 Bootstrap 4/5 的写法（以 Bootstrap 5 为例，使用 ms-auto）：
<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="Logo">
</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>⚠️ 注意事项：不要给单个 <li> 添加 float-right 或 ml-auto：.navbar-nav 是 Flex 容器，其子元素（<li>）默认为 flex: 0 0 auto，无法通过自身 margin-left: auto 实现“孤立右移”；若使用 Bootstrap 4，请将 ms-auto 替换为 ml-auto；确保引入了 Bootstrap 的 CSS 和 JS（含 Popper），否则折叠菜单可能失效；在小屏幕折叠状态下，ms-auto 仍生效，但所有导航项会垂直堆叠——这是预期行为，无需额外干预。
这种双 <ul> 结构不仅语义更合理（区分主导航与辅助操作），也完全符合 Bootstrap 官方推荐模式（见 Bootstrap Navbar Docs 中 “Navs” 与 “Utilities” 组合示例）。最终效果：左侧四项靠左排列，“Contact” 单独稳居右侧，清爽、健壮、无 hack。
