直接加 ms-auto 无效是因为 .navbar-nav 默认不占满父容器宽度，无剩余空间可推；需先让其撑满（如 w-100），再对首个需右对齐的 li 加 ms-sm-auto。
为什么直接加 ms-auto 没用？
因为 .navbar-nav 默认不占满父容器宽度，它只是个“内容自适应”的 flex 容器。ms-auto 的作用是把 margin-left 设为 auto，从而把元素推到剩余空间的最右端——但如果没有“剩余空间”，它就推不动。
- 错误做法：在
<li class="nav-item"><a>Log In</a></li>上直接加ms-auto - 正确前提：先让
.navbar-nav本身撑满整行（用w-100或flex-fill） - 再对第一个需右对齐的
<li>加ms-sm-auto（推荐带断点，避免小屏错位）
如何让两个按钮（如 Login / Sign Up）稳定靠右？
关键不是“把它们塞进导航栏右边”，而是让它们脱离左侧导航流，成为 navbar 内独立的 flex 子项。
- 把
<ul class="navbar-nav"></ul>和登录/注册按钮放在同一级，都作为.navbar-collapse的直接子元素 - 给按钮外层包一层
<div class="d-flex ms-auto">（不是给按钮本身加） <li>按钮之间加 <code>ms-2控制间距，避免紧贴 - 不要用
float: right：在 flex 容器里会被忽略，且破坏响应式重排 - 正确方式：给
<div class="collapse navbar-collapse"> 直接加 <code>justify-content-end（Bootstrap 5.3+ 原生支持） - 如果用了下拉菜单，确保
.dropdown-menu没被text-start或left: 0锁死；加dropdown-menu-end强制右对齐弹出层 - 别给
.navbar-nav加ms-auto：它此时是单个 flex item，ms-auto对它不起作用 - 把
<div class="dropdown"> 移出 <code>.navbar-nav，放到.navbar-collapse内部、<ul class="navbar-nav"></ul>之后 - 外层用
<div class="d-flex ms-auto"> 包裹整个 dropdown，让它右移 <li>在 <code><ul class="dropdown-menu"></ul>上加dropdown-menu-end，而非dropend（后者会向右横弹，通常不需要） - 绝对不要手动写
style="top: 100%; left: auto;"：Popper 会覆盖它，且在移动端失效
实际布局中，最容易被忽略的是「容器层级」：Navbar 的 flex 流分三层——品牌区、折叠容器（
折叠后菜单内容也想靠右？别碰 text-end
.navbar-collapse 是 flex 容器，默认 justify-content: flex-start。小屏展开时，整个 .navbar-nav 是它的一个子项，所以左对齐是默认行为——改 text-end 完全无效。
下拉菜单触发器靠右，但弹出层还是偏左？
这是 Popper 定位逻辑和容器结构共同导致的——菜单默认以触发器左上角为锚点向下展开，跟 navbar 的右对齐无关。
.navbar-collapse）、独立右对齐区。混用这三层，或者强行用文本对齐类干预 flex 行为，几乎必然失败。
