.navbar-brand 看起来偏上是因为图片默认 vertical-align: baseline 导致基线对齐错位；文字需设 line-height: 1，图片应设 height 和 align-self: center 或用 flex 包裹统一居中。
为什么 .navbar-brand 看起来偏上？
默认情况下，Bootstrap 的 .navbar-brand 会和导航项一起被 display: flex 容器（.navbar）按 align-items: center 对齐——但问题常出在 Logo 图片没设高度或未重置 vertical-align。图片默认是 vertical-align: baseline，导致文字基线对齐、视觉上“下沉”，而 Logo 却“浮高”，整体看起来不居中。
常见错误现象：<img src="logo.png" class="navbar-brand"> 没加 height 或 object-fit，文字和图片上下错位；或者用了自定义字体大小但没同步调整行高。
- 确保
.navbar-brand内部元素有明确尺寸：图片加height和width: auto，避免拉伸 - 图片加
align-self: center或统一用vertical-align: middle（仅对 inline 元素有效） - 若混用文字和图片，建议都包裹在
<span>或<div>中并设display: flex+align-items: center
navbar-brand 里放文字时行高不一致怎么办？
当 .navbar-brand 只含文字（比如 “MyApp”），它继承 .navbar 的 line-height，但不同字体的 font-size 和 line-height 渲染效果差异大，尤其在移动端小屏下容易“顶到顶部”。这不是 Bug，而是 CSS 行盒（line box）高度计算方式导致的。
- 显式设置
.navbar-brand { line-height: 1; }，让文字高度紧贴字号，再靠 flex 居中兜底 - 避免用
padding-top/padding-bottom微调——这会破坏响应式折叠逻辑 - 如果用了
font-weight: bold或自定义字体，检查是否触发了浏览器字体度量重排，可加font-display: swap缓解
响应式折叠后 Logo 位置错乱怎么修？
Bootstrap 的 .navbar-collapse 在 md 断点以下会变成垂直堆叠，此时 .navbar-brand 默认仍占整行宽度，且未重置 flex 行为，导致折叠菜单展开后 Logo 被挤到左侧、文字换行或溢出。
- 给
.navbar-brand加flex-shrink: 0，防止它被压缩变形 - 在折叠状态（
@media (max-width: 767.98px)）下，确认.navbar-brand外层没有意外的width: 100%或text-align干扰 - 如果用了
.navbar-expand-md，但实际想在sm就展开，记得同步改 class 并覆盖对应断点的flex-direction
用 gap 或 margin 调间距反而更歪？
有人试图用 margin-right 给 Logo 加空隙，结果发现折叠后右侧留白过大；或用 gap: 0.5rem 在 .navbar-nav 里分隔菜单项，却忘了 .navbar-brand 不在同一个 flex 容器里——它和 .navbar-nav 是兄弟节点，不是子项。
-
.navbar-brand和.navbar-nav同级，要调横向间距，只能对它们父容器（.navbar）设justify-content: space-between或用ms-auto推导航右 - 不要对
.navbar-brand单独设margin-left/margin-right，除非你确定所有断点下都适用 - 真正需要弹性间隔时，用
<div class="ms-auto"></div>插在.navbar-brand和.navbar-nav之间，比硬写 margin 更健壮
<div class="d-flex align-items-center">，图片设 height: 2rem，文字设 line-height: 1，外层 .navbar 保持默认 align-items: center ——其余靠 Bootstrap 原生 flex 行为兜底。复杂点在于图片加载时机和字体加载顺序，这两处一动，视觉就可能闪一下。 
