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 最常被忽略的是图片自身适配。直接给 <img alt="Bootstrap 导航栏 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
aria-label），这些细节远比“怎么让它消失”更重要。 
