大屏自动展开搜索框、小屏收起为图标按钮需用两套html结构配合js控制：大屏用d-none d-lg-block显示完整搜索框，小屏用d-lg-none显示图标按钮，点击后动态显示输入框并聚焦，同时处理esc关闭、外部点击收起及移动端软键盘滚动定位。
搜索框在大屏自动展开、小屏收起为图标按钮
Bootstrap 默认的 .navbar 搜索组件不会自动响应式切换显示模式，必须手动控制 DOM 结构和 CSS 类。核心思路是：**大屏保留完整输入框，小屏隐藏输入框、只留搜索图标按钮，点击后才动态显示输入框并聚焦**——不能靠纯 CSS（因为需要聚焦和键盘交互），得配合 JS 控制显隐与焦点。
- Bootstrap 5+ 推荐用
navbar-expand-lg或更高断点类（如navbar-expand-xl），确保小屏下导航栏折叠，搜索区域默认不渲染输入框 - 小屏时，用一个带
data-bs-toggle="collapse"的按钮触发搜索区域展开，但注意：原生 collapse 不适合表单控件，容易失焦或样式错乱，更稳妥的是用 JS 手动 toggle.d-none/.d-lg-block等响应式类 - 展开后必须立即调用
input.focus()，否则用户还得再点一次输入框；同时监听Esc键关闭，提升体验
HTML 结构要分离大屏/小屏两套搜索区域
不能只写一个 <input> 然后靠 class 切换显隐——那样小屏展开时会破坏 navbar 高度、触发重排，且移动端软键盘弹出后定位不准。正确做法是写两份结构，用响应式类控制各自生效范围：
<!-- 大屏显示的搜索框 -->
<div class="d-none d-lg-block ms-auto">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="搜索..." aria-label="Search"><button class="btn btn-outline-success" type="submit">搜索</button>
</form>
</div>
<p><!-- 小屏显示的搜索按钮（仅图标）-->
</p><div class="d-lg-none ms-auto">
<button class="btn btn-outline-secondary p-2" id="searchToggleBtn">
<i class="bi bi-search"></i>
</button>
</div><p><!-- 小屏展开后的搜索区域（初始隐藏）-->
</p><div class="d-lg-none d-flex justify-content-center mt-2 px-3" id="mobileSearchContainer" style="display: none;">
<form class="w-100">
<div class="input-group">
<input class="form-control" type="search" placeholder="搜索..." aria-label="Search" id="mobileSearchInput"><button class="btn btn-outline-success" type="submit">搜索</button>
</div>
</form>
</div>
JS 控制小屏搜索展开/收起与焦点管理
关键不是动画，而是行为闭环：点击图标 → 显示输入框 → 自动聚焦 → 按 Esc 关闭 → 移动端软键盘收起后恢复按钮状态。以下代码兼容 Bootstrap 5.3+，不依赖 jQuery：
const searchToggleBtn = document.getElementById('searchToggleBtn');
const mobileSearchContainer = document.getElementById('mobileSearchContainer');
const mobileSearchInput = document.getElementById('mobileSearchInput');
<p>searchToggleBtn.addEventListener('click', () => {
if (mobileSearchContainer.style.display === 'none') {
mobileSearchContainer.style.display = 'flex';
setTimeout(() => mobileSearchInput.focus(), 100); // 延迟确保渲染完成
} else {
mobileSearchContainer.style.display = 'none';
}
});</p><p>// 按 Esc 关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && mobileSearchContainer.style.display !== 'none') {
mobileSearchContainer.style.display = 'none';
}
});</p><p>// 点击外部区域收起（可选）
document.addEventListener('click', (e) => {
if (
mobileSearchContainer.style.display !== 'none' &&
!mobileSearchContainer.contains(e.target) &&
e.target !== searchToggleBtn
) {
mobileSearchContainer.style.display = 'none';
}
});</p>
容易被忽略的细节：移动端软键盘与滚动定位
在 iOS Safari 和部分安卓浏览器中，input.focus() 触发软键盘后，页面可能不会自动滚动到输入框位置，导致用户看不到自己正在输什么。这不是 Bootstrap 的问题，但必须处理：
- 给
#mobileSearchContainer加scroll-margin-top: 60px（适配 navbar 高度），再调用mobileSearchInput.scrollIntoView({ behavior: 'smooth', block: 'center' }) - 避免在
focus后立刻scrollIntoView，iOS 有延迟，建议用setTimeout(..., 300)或监听input事件后再 scroll - 如果使用了
position: sticky的 navbar，需确认mobileSearchContainer的父容器没有overflow: hidden，否则 scrollIntoView 无效
实际项目中，最常出问题的是焦点没拿到、软键盘遮挡输入框、以及点击按钮后页面意外跳动——这些都比“怎么写响应式类”更影响可用性。
