最简方案是给.navbar-nav加ms-auto实现菜单右对齐，品牌默认左对齐；需确保.navbar-nav为navbar直接子元素，避免嵌套错误、float/text-align滥用及移动端失效问题。
Navbar里让品牌左对齐、菜单右对齐，必须用ms-auto
直接给.navbar-nav加ms-auto是最简方案，它利用 flex 的 margin 自动推挤逻辑，把整个导航列表“顶到最右”。但注意：ms-auto必须加在.navbar-nav这一级容器上，而不是某个.nav-item内部——后者会破坏语义结构，小屏折叠后错位。
常见错误是试图用float: right或text-align: right，结果 hamburger 菜单展开时内容堆叠错乱，或者屏幕阅读器无法识别导航层级。
-
.navbar-brand保持默认位置（通常已左对齐），无需额外 class -
.navbar-nav外层不能套<div>再加<code>ms-auto，必须是 navbar 直接子元素 - 若同时有多个
.navbar-nav，只给需要右对齐的那个加ms-auto，否则它们互相挤压 - 漏掉
data-bs-toggle="dropdown"会导致 JS 不初始化，所有方向类失效 -
.dropdown-menu必须是.dropdown的**直接子元素**，中间不能插<div>或<code><form></form> - 如果用了
.d-flex .ms-auto包裹 dropdown，但没加.navbar-nav同级结构，dropdown-menu-end会对齐到整个 navbar 右边界，而非按钮本身 - 避免给多个元素同时设
ms-auto再配order类——DOM 顺序和视觉顺序容易脱节 - 不要用
position: absolute强行定位，会脱离 flex 流，导致汉堡菜单展开时遮挡或点击区域偏移 - 若品牌和用户菜单都设了
ms-auto，折叠后它们会重叠——应只保留一个“锚点”，其余用order-1/order-2控制渲染顺序 - 别依赖
justify-content-center——navbar 默认justify-content: flex-start，且该属性对单个子项无效 - 如果用了
.container限制宽度，记得给 navbar 本身设width: 100%，否则mx-auto无参照边界 - 垂直居中必须用
align-items-center，text-center只影响行内内容，对 flex 子项无效
下拉菜单也想靠右？dropdown-menu-end不是加在菜单上，而是靠结构配合
dropdown-menu-end只控制菜单内容的水平对齐（右边缘对齐触发按钮），不控制 dropdown 元素本身在 navbar 里的位置。所以光加这个类没用——你得先让 dropdown 容器自己“站到右边”。
正确做法：把<div class="dropdown">从<code>.navbar-nav里拿出来，和.navbar-nav同级，放在.navbar-collapse内部，并给它加ms-auto；同时确保触发按钮嵌套在<li class="nav-item">中，且带data-bs-toggle="dropdown"属性。
移动端折叠后右对齐失效？别指望ms-auto在 column 布局里工作
小屏下.navbar-collapse变成 vertical flex（flex-direction: column），ms-auto失去左右推挤意义，按钮可能跑到顶部或被截断。
响应式修复的关键是：用媒体查询单独处理移动端对齐，比如在@media (max-width: 767.98px)里给右上角按钮加text-end或d-flex justify-content-end，而不是复用桌面端逻辑。
想让 logo 居中、两边留白？mx-auto + 同级空元素才是可靠解法
mx-auto在 navbar 里常失效，根本原因是父容器虽为 flex，但缺少“左右对称”的同级兄弟元素。单纯加mx-auto到.navbar-brand，它会被当成唯一 flex 项目而左对齐。
真正起效的方式是：在.navbar-brand左右各放一个空的<div class="flex-grow-1"></div>，或用<span class="flex-grow-1"></span>占位，再给.navbar-brand加mx-auto。这样 flex 才能识别出“三段式”结构。
