ms-auto是bootstrap 5+中实现flex子项右对齐的标准解法，等价于margin-left: auto，需加在flex容器的直接子元素（如ul.navbar-nav）上，而非nav-item自身，因后者默认为inline元素不参与flex布局。
ms-auto 是让 Flex 子项右对齐的简写类
在 Bootstrap 5+ 中，ms-auto 就是你要找的“最后一个项目右对齐”的标准解法。它等价于 margin-inline-start: auto，在从左到右（LTR）语言环境下，实际效果就是 margin-left: auto —— 把该元素左侧所有剩余空间撑满，自然顶到容器最右端。
为什么不能直接给 nav-item 加 ms-auto
常见错误是这么写：<li class="nav-item ms-auto">Login</li>。这完全无效，因为：
-
nav-item默认是display: inline或inline-block，不参与父容器的 flex 主轴布局 -
ms-auto只对 Flex 容器的直接子元素 生效，且该子元素必须是块级或 flex 项（比如<ul></ul>、<div class="d-flex">） <li>真正该加的位置是包裹目标项的 <code><ul class="navbar-nav ms-auto"></ul>，和左侧导航并列
两个按钮一左一右的最小结构
不需要 justify-content-between，更稳、更直观：
<div class="d-flex"> <button class="btn btn-sm">取消</button> <button class="btn btn-sm btn-primary ms-auto">确认</button> </div>
要点：
- 父容器必须有
d-flex，否则ms-auto无意义 - 只给右边那个加
ms-auto；别给左边加me-auto，否则右边按钮会被挤出视口 - 响应式下依然生效：小屏宽度收缩时，
ms-auto仍能保证右侧按钮贴右边缘，不会换行错位
注意 Bootstrap 版本差异和失效场景
ms-auto 在 Bootstrap 4 中叫 ml-auto，5+ 已废弃后者。另外，以下情况会失效：
- 父容器没加
d-flex（所有 flex 对齐类都依赖这个前提） - 目标元素嵌套了两层以上，比如
<div><div><button class="ms-auto"></button></div></div>，ms-auto加在了孙子节点上 - 外层用了
text-center或text-end，和 flex 类混用导致语义冲突 - 在
.navbar-collapse折叠后（移动端展开为 column），ms-auto不再起作用——此时应改用text-end或d-flex justify-content-end
真正要右对齐的，永远是那个“直接子元素”，而不是你想对齐的内容本身。层级和 display 类型，比类名本身更重要。
