Navbar内文字对齐由Flexbox的justify-content和align-items控制，而非text-*类；品牌与导航两端对齐用ms-auto作用于.navbar-nav，折叠后居中需.navbar-collapse .navbar-nav { justify-content: center; }。
Navbar 内文字对齐靠什么控制？不是 text-* 类
Bootstrap 导航栏（.navbar）内部的文字对齐，**不依赖 text-start、text-center 这类全局文本工具类**。因为 navbar 默认是 display: flex 容器，子元素（如 .navbar-brand、.navbar-nav）的布局由 Flexbox 的 justify-content 和 align-items 主导，而非 text-align。
常见误操作：给 .navbar-brand 加 text-center，发现没效果——它确实没用，因为该元素是 flex 项目，text-align 不影响其在主轴上的位置。
-
.navbar-brand默认左对齐，本质是它在 flex 容器中处于第一个位置，且无其他推力 - 右对齐导航项，应使用
ms-auto（作用于同级容器，如<ul class="navbar-nav ms-auto"></ul>），不是给nav-item自身加 - 居中整个导航内容？需显式设置
.navbar-nav { justify-content: center; }，且必须确保它处于折叠/展开状态下的正确选择器权重下
折叠状态下导航链接为何不居中？检查 .navbar-nav 的 justify-content
Bootstrap 5 默认不会让折叠后的 .navbar-nav 居中；它的初始样式是 justify-content: flex-start，所以链接天然左对齐。如果你看到居中了，大概率是项目里误加了 text-center 到 .navbar-collapse 或其父元素，或者覆盖了 justify-content。
用浏览器开发者工具直接选中折叠后的 .navbar-nav（即移动端汉堡菜单展开后的那个 <ul></ul>），看 computed 样式里 justify-content 是否为 center。如果不是，就说明没生效。
- 要让折叠后链接居中，只需加一条 CSS：
.navbar-collapse .navbar-nav { justify-content: center; } - 必须带
.navbar-collapse前缀，否则可能被默认样式覆盖（尤其在未折叠时） - 不要写成
.navbar-nav .navbar-nav或漏掉空格——选择器错误会导致完全不生效 - 不用动 JS、不改 HTML 结构，纯 CSS 即可解决
如何让品牌文字和导航项两端对齐？别用 float
两端对齐（brand 左、nav 右）是 navbar 最常见需求，但很多人试图用 float: left/right 或 text-align，结果在响应式下错乱或 hamburger 菜单失效。
正确方式是利用 Bootstrap 5 的 flex 布局语义：.ms-auto 让某个兄弟元素自动占据剩余空间左侧，从而把后续内容“推”到最右边。
- 结构上，
.navbar-brand和.navbar-nav应为.navbar的直接子元素（同级） - 给
.navbar-nav加ms-auto（不是ml-auto，后者在 Bootstrap 5+ 已废弃） - 错误写法：
<li class="nav-item ms-auto">——ms-auto对nav-item无效，因为它不是 flex 容器的直系子项 - 更干净的写法：在
.navbar-brand后插入一个空的<div class="ms-auto"></div>，再放.navbar-nav，这样逻辑更清晰
响应式场景下文字对齐怎么切？用断点类而非 media query
如果需要“小屏居中、大屏左对齐”，别手写 @media，Bootstrap 提供了开箱即用的响应式文本类，命名规则是 text-{breakpoint}-{alignment}。
但注意：这些类只对**块级文本容器**（如 <p></p>、<div>）有效，不能直接用于 <code>.navbar-brand 内部文字——除非你把它包进一个 <div class="text-center text-lg-start"> 里。<ul>
<li>例如：<code><div class="navbar-brand text-center text-lg-start">Logo</div>，小屏居中、≥992px 左对齐
justify-content 控制了整体布局，这类文本类可能被忽略.navbar-nav 的 flex 行为 + 断点媒体查询微调，而不是依赖 text-*
复杂点在于：navbar 的折叠/展开状态会切换 DOM 结构（.navbar-collapse 显隐），所以同一套 CSS 规则往往要同时适配两种状态，容易漏掉其中一种。检查时务必在移动端视图下打开开发者工具，确认目标元素是否真的存在于当前 DOM 中。
