ms-auto加在nav-item上无效，因nav-item是inline元素，不参与flex布局；须加在.navbar的直系flex子元素（如单独的）上才能右对齐。
ms-auto 为什么加在 nav-item 上没用
因为 nav-item 默认是 inline 元素，不参与 flex 主轴布局；而 ms-auto 是为 Flex/Grid 容器内的子元素设计的边距工具类，它只在父容器是 display: flex 或 display: grid 时才生效。Navbar 内部真正起 flex 作用的是 .navbar-nav（或直接是 .navbar），所以 ms-auto 必须加在它的**直系子元素**上——比如一个 <div>、<code><ul></ul>，或者单独拎出来的 <form></form>。
右对齐单个 nav-item 的正确结构
不能把 ms-auto 加在 nav-item 标签上，也不能加在 nav-link 上。要实现“Contact”靠右、其余菜单靠左，得拆开结构：
- 保留左侧导航项放在第一个
<ul class="navbar-nav"></ul>里 - 在同一个
<nav class="navbar"></nav>内，再放一个独立的<ul class="navbar-nav ms-auto"></ul> - 把想右对齐的那个
nav-item放进这个新<ul></ul>中
这样两个 <ul></ul> 是 .navbar 的同级 flex 子项，第二个自动被推到右侧。
多个右对齐项之间如何保持紧凑
如果右区要放“Log In”和“Sign Up”两个按钮，它们应该处于同一 flex 容器内（比如同一个 <ul class="navbar-nav ms-auto"></ul>），而不是各自加 ms-auto。否则每个都会试图占满剩余空间，导致错位或换行。
- ✅ 正确：两个
nav-item同属一个带ms-auto的<ul></ul> - ❌ 错误：给每个
nav-item都加ms-auto，或分别包两层<ul></ul>并都加ms-auto - ⚠️ 小屏适配建议：用
ms-sm-auto替代ms-auto，避免移动端也右对齐导致内容被挤出视口
搜索框右对齐时 width: 50% 和 ms-auto 冲突吗
不冲突，但要注意作用对象。如果你希望搜索 <input> 占宽 50% 且整体右对齐，ms-auto 必须加在 <input> 上，而不是外层 <form></form> —— 因为 <form class="d-flex"></form> 本身已是 flex 容器，它的子元素（即 <input> 和 <button></button>）才能响应 ms-auto。
-
<input class="form-control me-2 ms-auto" style="width: 50%;">✅ -
<form class="d-flex ms-auto"></form>❌（这会让整个表单右对齐，但内部 input 的 width: 50% 可能失效或换行） - 若需整体右对齐且宽度可控，更稳的做法是把
<form></form>移出.navbar-nav，直接作为.navbar的子元素，并加ms-auto
