Logo在小屏下该藏不藏？需正确使用d-none d-md-block等响应式类，确保d-none在前；.navbar-brand须置于.navbar-collapse内才能同步折叠；图片推荐img-fluid或object-fit保持比例；打印时需单独处理d-print类。
Logo 在小屏下该藏不藏？检查 d-none d-md-block 类顺序
Bootstrap 5 的响应式显示类依赖 CSS 层叠顺序，d-none 必须写在前面，否则会被后续的 d-md-block 覆盖。常见错误是写成 d-md-block d-none，结果 Logo 在所有尺寸下都不可见。
正确写法：d-none d-md-block 表示「默认隐藏，中屏（≥768px）起显示」；如果想「小屏显示、中屏及以上隐藏」，则用 d-block d-md-none——注意这里没写 d-none 开头，因为 xs 断点无需前缀，默认生效。
- 断点阈值固定：sm ≥ 576px，md ≥ 768px，别指望
d-sm-none在 500px 宽度生效（它只在 ≥576px 时触发） - Chrome 模拟器选 iPhone SE（375px）或 Nexus 5X（412px）才能准确测试 xs 行为
- 避免混用
visually-hidden：它不响应断点，且对所有人眼都不可见，不是“小屏隐藏大屏显示”的替代方案
Logo 和导航项不同步显示？别让 .navbar-brand 脱离 .navbar-collapse
如果 Logo 在小屏下始终可见，但导航项被折叠进汉堡菜单，大概率是 .navbar-brand 没放进 .collapse 容器里。Bootstrap 的响应式逻辑只对 .navbar-collapse 内部内容做折叠控制，外部元素（如独立写的 .navbar-brand）会一直渲染。
标准结构应为：
<nav class="navbar navbar-expand-md"><div class="container-fluid">
<a class="navbar-brand d-md-block d-lg-none" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"></button>
<div class="collapse navbar-collapse" id="navbarNav">
<a class="navbar-brand d-none d-lg-block" href="#">Logo</a>
<ul class="navbar-nav">...</ul>
</div>
</div>
</nav>
- 两个
.navbar-brand分开写，用不同响应式类控制显隐，比 JS 切换更轻量可靠 - 不能把
.navbar-brand放在.navbar-collapse外又期望它随汉堡菜单一起收起 - 若用
flex布局居中 Logo，注意d-none会移除元素，导致justify-content-center计算错位
Logo 图片宽高失真？优先用 object-fit 而非 width: 100%
响应式 Logo 最常被忽略的是图片自身适配。直接给 width: 100% 在小屏下容易拉伸变形，尤其当父容器（如 .navbar-brand）高度被 line-height 或 padding 限制时。
推荐做法是保留原始宽高比：
- 给图片加
class="img-fluid"（Bootstrap 内置），自动设max-width: 100%+height: auto - 若需严格等比缩放且裁剪，用
style="object-fit: contain; width: 100%; height: 1.5rem;"，其中1.5rem对齐 Bootstrap 默认.navbar高度 - 避免在
.navbar-brand上设固定height，否则小屏下文字和图片可能溢出或截断 - SVG Logo 更优：天然矢量、无缩放失真，且可内联后用
fill动态改色
打印时 Logo 消失？d-print 类要单独处理
如果页面支持打印，而 Logo 在打印预览里不见了，很可能是响应式类干扰了 d-print 的行为。例如 d-none d-md-block d-print-block 看似合理，但 d-none 会覆盖所有屏幕尺寸下的显示，仅靠 d-print-block 不足以让它在打印时出现——因为 d-print 类只在 @media print 下生效，且特异性高于多数响应式类。
- 安全写法：
d-none d-print-block（全局隐藏，仅打印显示）或d-md-block d-print-block（中屏起显示，打印也显示） - 不要混用
d-sm-none d-print-block：它会在 sm 及以上屏幕隐藏，但打印时仍显示——这通常不是你想要的 - 打开浏览器打印预览（Ctrl+P），检查 computed style 中
display最终值，确认是否被某个d-*类锁定为none
实际项目里最容易被忽略的，是把 Logo 当作纯视觉元素来处理，而忘了它在小屏下可能承担品牌识别和点击返回首页的核心交互功能——所以隐藏时得留出足够触控区域，显示时得保证可访问性（比如加 aria-label），这些细节远比“怎么让它消失”更重要。
