Navbar中Logo左对齐、菜单右对齐失效的主因是未正确分配flex子元素空间；推荐用ms-auto作用于.navbar-nav实现右对齐，多区块布局则用me-auto撑开间隙，折叠态需配合justify-content-end和.dropdown-menu-end确保右对齐。
Navbar里Logo左对齐、菜单右对齐的常见失效原因
直接写 justify-content-start 和 justify-content-end 到同一个 .navbar 容器里没用——因为 Bootstrap 的 .navbar 默认是 flex 容器，但它的子元素（比如 .navbar-brand 和 .navbar-nav）必须显式分配空间，否则 flex 会把它们挤在一起或错位。
用 ms-auto 把菜单推到右边
这是最轻量、兼容性最好的做法。Bootstrap 5+ 提供了间距工具类，ms-auto（margin-left: auto）会让紧邻的元素自动占满剩余空间，从而把后面的元素顶到最右。
-
.navbar-brand放在最前，不加额外 class -
.navbar-nav紧跟其后，并加上ms-auto - 如果用了折叠菜单（
.navbar-toggler），它要放在.navbar-nav之后，否则会被ms-auto推偏
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Logo</a>
<div class="navbar-nav ms-auto">
<a class="nav-link" href="#">首页</a>
<a class="nav-link" href="#">关于</a>
</div>
<button class="navbar-toggler"></button>
</nav>
用 navbar-nav + me-auto 控制多个区块对齐
当需要左中右三段布局（比如 Logo 左、搜索框居中、菜单右），就不能只靠 ms-auto。此时要把 .navbar-nav 拆开，中间用 me-auto（margin-right: auto）撑开间隙。
- 第一个
.navbar-nav（左菜单）不加 class - 第二个元素（如搜索框）加
me-auto，它会把右边所有东西顶到末端 - 第三个
.navbar-nav（右菜单）自然就靠右了 - 注意：
me-auto必须作用在中间那个“撑开”的元素上，不是.navbar本身
<nav class="navbar navbar-expand-lg"> <a class="navbar-brand" href="#">Logo</a> <div class="navbar-nav"><a class="nav-link">产品</a></div> <form class="me-auto"><input class="form-control"></form> <div class="navbar-nav"><a class="nav-link">登录</a></div> </nav>
响应式下右侧菜单被折叠时的对齐问题
小屏幕触发折叠后，.navbar-nav 会变成垂直堆叠，ms-auto 失效——这不是 bug，是设计行为。想让折叠后菜单仍右对齐，得改 .navbar-collapse 的 justify 方式：
- 给
.navbar-collapse加justify-content-end（仅影响折叠态） - 同时确保
.navbar-toggler在.navbar-collapse外部，否则会影响 flex 布局 - 如果用了
navbar-dark或自定义背景色，记得检查文字颜色是否被覆盖
容易忽略的是：折叠菜单的 dropdown-menu 默认左对齐，若需右对齐，得单独给 .dropdown-menu 加 dropdown-menu-end。
