logo 太小需先确认是 img、background-image 还是字体图标：img 用 .navbar-brand img 设置宽高并保持比例；background-image 改 background-size；字体图标调 font-size；注意 flex 挤压、viewbox、断点覆盖及 min-height/flex-shrink 等隐性限制。
Bootstrap 导航栏里的品牌 Logo 看起来太小，通常不是 Bootstrap “限制了大小”，而是你没控制住它的渲染上下文——它可能被父容器截断、被 flex 对齐挤压、或根本就不是 <img> 而是 background-image。
确认 Logo 是 <img> 还是 background-image
这是最容易卡住人的第一步。打开浏览器开发者工具，点中 Logo 区域，看 DOM 结构：
- 如果是
<a class="navbar-brand"><img src="logo.svg"></a>，那你就该调.navbar-brand img的width和height - 如果是
<a class="navbar-brand" style="background-image: url(logo.svg)"></a>，那width/height没用，得改background-size: contain或100% 100% - 如果用了字体图标（如
<i class="bi bi-bootstrap"></i>），那就得调font-size，不是图片尺寸
.navbar-brand img 设宽高后仍变形或不生效
常见于 SVG 或高宽比敏感的图片。直接写 width: 120px; height: 40px; 很容易拉伸失真：
- 优先用
width: 120px; height: auto;，保持原始比例 - 确保 SVG 源文件有合理
viewBox（比如viewBox="0 0 240 60"），否则height: auto可能算不准 - 别在
.navbar-brand上设line-height或padding，它们会干扰<img>垂直居中，加line-height: 1;重置更安全 - 检查是否被
.navbar-nav的align-items: center挤压——同级 flex 容器里，.navbar-brand和.navbar-nav都是子项，align-items会影响所有子项高度对齐
移动端折叠后 Logo 突然变小或错位
这不是 Logo 自身缩放失效，而是 .navbar-collapse.show 的 max-height 动画估算不足，导致整个折叠区域被截断，Logo 所在的 .navbar-brand 垂直空间被压缩：
- 临时测试：加
.navbar-collapse.show { max-height: 120vh !important; }，看是否恢复正常 - 别用
max-height: none，它会让 CSS 过渡动画失效 - 如果 Logo 在折叠态下还显示（比如固定在左上角），要额外检查
@media (max-width: 991.98px)下的.navbar-brand样式是否被覆盖——Bootstrap 5 断点是991.98px，不是992px或991px - 用
fixed-top时，记得同步给body加padding-top，否则视觉上 Logo 像“陷进去了”
为什么改了 height 没反应？重点查这三处
真正卡住调试的，往往不是 CSS 写错，而是被隐性规则拦截：
-
.navbar是否残留旧版min-height: 50px？Bootstrap 5 已移除，但升级不干净的项目里还存在，用 DevTools 的 Computed 面板确认 -
.navbar-brand是否被flex容器的flex-shrink: 1缩小？加flex-shrink: 0;锁死宽度 - 是否误给
.navbar设了height: 60px？这会压制内部 padding 和行高撑起的自然高度，破坏响应式折叠逻辑，尤其在移动端展开菜单时内容被截断
最常被忽略的是：同一页面里 Logo 可能同时以 <img> 和 background-image 形式存在（比如桌面用图片、手机用背景图），而你只调了一种。动手前先看 DOM，再看 computed styles，比猜十次都快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
