Navbar品牌Logo在移动端被强制缩小，是因为Bootstrap 5在视口宽度<992px时折叠导航栏并重设.navbar-brand的font-size为1.25rem及紧凑padding；图片变形或错位则源于未设max-height与height:auto，或受父容器min-height、line-height干扰。

Navbar品牌Logo在移动端被强制缩小，navbar-brand 图片变形或错位

Bootstrap 默认对 navbar-brand 内的 <img> 做了响应式约束：在 sm（max-width: 100% 和 height: auto 缩放图片，但没设明确高度，导致 Logo 被压扁或过小。尤其当原始 Logo 高度远大于默认 navbar 的 height（如 48px），缩放后视觉比例失衡。

实操建议：

• 显式给 navbar-brand > img 设置 height（推荐使用 rem 或固定 px），并设 width: auto 保持宽高比
• 用媒体查询精准控制移动端尺寸，避免影响桌面端——不要直接改 .navbar-brand 全局样式
• 若用 SVG，确保其 viewBox 正确且无内联 width/height 属性，否则会被 Bootstrap 的 max-width: 100% 截断

移动端 Logo 左右边距不对齐，和折叠菜单按钮不垂直居中

默认情况下，.navbar-toggler 和 .navbar-brand 在 flex 容器中各自对齐，但 navbar-brand 的行高、上下内边距或图片自身的基线（baseline）会导致视觉偏移。常见现象是 Logo 看起来“浮”在按钮上方。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

实操建议：

• 给 .navbar-brand 添加 align-items-center（Bootstrap 5）或手动加 display: flex; align-items: center;
• 移除 Logo 图片默认的 vertical-align: baseline，改为 vertical-align: middle 或 top
• 检查是否意外设置了 margin-top / padding-bottom 等干扰项，特别是从旧项目迁移时带入的全局 img 样式
• 用浏览器开发者工具勾选「Layout」面板，确认 navbar-brand 的 cross-axis 对齐是否生效

用 navbar-expand-sm 后 Logo 在折叠态仍过大，甚至撑开导航栏

很多人以为加了 navbar-expand-sm 就能自动适配，其实它只控制「何时折叠」，不干预 Logo 渲染尺寸。一旦触发折叠（即视口 ≤576px），.navbar-collapse 变成块级，但 .navbar-brand 仍在顶部独立区域，它的尺寸仍由自身样式决定。

实操建议：

• 必须配合媒体查询重置 Logo 尺寸，例如：

  @media (max-width: 575.98px) {
    .navbar-brand > img {
      height: 28px;
      margin: 4px 0;
    }
  }

• 如果用的是背景图（background-image），记得同步调整 background-size: contain 和 padding 占位
• 避免用 transform: scale() 缩放 Logo——它会脱离文档流，导致点击热区偏移且影响可访问性

关键点在于：Bootstrap 的 Navbar 是「结构响应式」而非「内容响应式」。Logo 的缩放和对齐必须由你主动接管，不能依赖框架默认行为。最常被忽略的是图片的 vertical-align 和媒体查询断点值（575.98px 而非 576px）的精度问题。