logo 显示异常的根源在于载体类型判断错误及容器尺寸失控：需先用开发者工具确认是 img、背景图还是字体图标，再分别设置 height/width、background-size 或 font-size；bootstrap 5 中 img 默认无尺寸限制，应设 height: 2rem; width: auto; object-fit: contain，并检查 viewbox、line-height 和响应式断点覆盖。
Logo 太大不是 Bootstrap “故意撑开”，而是你没控制好它的渲染上下文——它可能被父容器撑高、被 flex 对齐拉伸、或直接按原始尺寸渲染溢出导航栏。
确认 Logo 是 <img> 还是背景图 / 字体图标
这是第一步，也是最容易卡住人的地方。打开浏览器开发者工具，点中 Logo 区域看 DOM 结构：
- 如果是
<img src="logo.svg">，就该调.navbar-brand img的height和width，不是font-size - 如果是
background-image（比如.navbar-brand { background-image: url(logo.svg); }），那width/height完全无效，得改background-size: contain或100% 100% - 如果是字体图标（如
<i class="bi bi-bootstrap"></i>），才用font-size控制大小；混用时必须分开写样式
.navbar-brand img 设了宽高仍撑破导航栏
根本原因是 Bootstrap 5 对 .navbar-brand > img 只加了 vertical-align: middle，没设任何尺寸限制。图片会按原始尺寸渲染，尤其 SVG 或高清 PNG 容易顶破高度。
- 最简方案：
height: 2rem+width: auto+object-fit: contain（保比例不拉伸） - 别只写
width: 100%—— 宽图会被横向拉伸，破坏 logo 比例 - 确保 SVG 源文件有合理
viewBox（如viewBox="0 0 240 60"），否则height: auto可能算不准 - 移除
.navbar-brand上的line-height或多余padding，它们会额外增加垂直空间；加line-height: 1更安全
移动端 Logo 突然变大或错位
不是缩放失效，而是 .navbar-collapse.show 的 max-height 动画估算不足，导致折叠区域被截断，.navbar-brand 垂直空间被压缩，视觉上“Logo 浮起来了”。
- 临时测试：加
.navbar-collapse.show { max-height: 120vh !important; }，看是否恢复正常 - 别用
max-height: none—— 它会让 CSS 过渡动画完全失效 - 检查
@media (max-width: 991.98px)下的样式是否被覆盖（Bootstrap 5 断点是991.98px，不是992px） - 若用了
fixed-top，记得同步给body加padding-top，否则 Logo 看起来像“陷进去了”
缩放后右侧导航项没左移，中间留白
这是最典型的误解：你只缩了 <img>，但 .navbar-brand 容器本身尺寸没变，仍在按默认内边距和最小宽度撑开布局空间。
- 正确做法是把尺寸控制逻辑上移到容器层：
.navbar-brand { width: 30%; padding: 0; overflow: hidden; } - 再让图片自适应：
.navbar-brand img { width: 100%; height: auto; display: block; } - 务必注释或删除原有作用于
.logo的独立宽高样式（比如width: 50%），否则冲突 - 如果项目用了旧版 Bootstrap（v3/v4），还要检查
.navbar是否有残留min-height: 50px，需覆盖为min-height: auto
真正难的不是写几行 CSS，而是判断当前 Logo 是哪种载体、它被哪一层容器托住了、以及响应式断点下哪条规则在悄悄覆盖你写的样式。每次调不动，先打开开发者工具看 computed styles 和 DOM 结构，比反复试 !important 有效得多。
