直接结论：用 class="d-none d-md-block" 给搜索框容器加类即可。因为 d-none 全局隐藏，d-md-block 在 ≥768px（md 及以上）恢复显示，确保手机竖屏（xs/sm）完全隐藏、平板及桌面正常显示；而 d-lg-none 是在 ≥992px 隐藏，与需求相反。
Bootstrap 5 导航栏中搜索框如何响应式隐藏（仅手机端）
直接结论：用 class="d-none d-md-block" 给搜索框容器加类即可，不需要写 CSS 或 JS。
为什么是 d-none d-md-block 而不是 d-lg-none？
因为 Bootstrap 5 的断点定义中，sm（≥576px）对应小屏（如大手机横屏），md（≥768px）才真正进入平板/桌面范围。手机竖屏绝大多数在 xs（sm 下运行，所以必须从 sm 或更小断点开始隐藏。
-
d-none在所有尺寸下都隐藏 -
d-md-block在 ≥768px（即md及以上）时恢复为block - 组合效果：仅在 ≥768px 显示，手机（包括横屏小屏）全部不显示
- 若误用
d-lg-none，搜索框在 iPad 竖屏（768×1024）下仍会显示，不符合“只在桌面显示”需求
实际写法示例（Bootstrap 5.3+）
<nav class="navbar navbar-expand-lg"><div class="container-fluid">
<a class="navbar-brand" href="#">MyApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">首页</a></li>
</ul>
<!-- 搜索框：仅桌面显示 --><form class="d-none d-md-block ms-3">
<div class="input-group">
<input type="search" class="form-control" placeholder="搜索..." aria-label="Search"><button class="btn btn-outline-secondary" type="submit">?</button>
</div>
</form>
</div>
</div>
</nav>
注意：ms-3 是外边距，它不会影响响应式逻辑；关键就在 form 上的 d-none d-md-block。
常见踩坑点
容易忽略的细节比想象中多：
- 把
d-none d-md-block加在input上而不是它的父容器（如form或div.input-group）——会导致布局塌陷或对齐错乱 - 用
hidden属性或style="display:none"写死，破坏了响应式流，且无法被d-*-block覆盖 - 在
navbar-collapse内部又套了一层navbar-nav包裹搜索框——这会让搜索框随折叠菜单一起收起，失去“桌面常驻”的本意 - 忘了给
form加ms-*类调整间距，结果在桌面端贴着右侧菜单太近，视觉拥挤
最稳妥的做法：搜索框始终作为 navbar-collapse 的直系子元素，独立于 navbar-nav，用响应式工具类控制显隐。
