应使用 nav + nav-pills 组件，添加 flex-nowrap、overflow-x-auto 和 -webkit-overflow-scrolling: touch、transform: translateZ(0) 实现流畅横向滚动，重设 nav-link 尺寸与圆角，并分离删除按钮操作域，历史数据需截断、去重、限存10条。
搜索历史标签栏该用什么Bootstrap组件
直接用 nav + nav-pills 最稳妥，别碰 list-group 或 badge 堆砌。前者原生支持水平滚动（flex-nowrap + overflow-x-auto），后者在小屏上容易换行或溢出，且不自带点击反馈。
关键不是“多像标签”，而是“能左右滑、点得准、不卡”。手机端拇指操作区域至少 44px 高，.nav-link 默认 padding 太小，必须重设。
- 加
class="nav nav-pills flex-nowrap overflow-x-auto pb-1"到容器 - 给每个
<a class="nav-link"></a>加style="min-width: 80px; padding: 12px 16px;" - 移除默认的
border-radius，改用border-radius: 20px更符合移动端圆角习惯
怎么让历史标签横向滚动不卡顿
纯 CSS 滚动在 iOS Safari 上常卡顿，尤其标签多时。根本原因是浏览器没开启硬件加速，且滚动容器缺少触发条件。
必须加这两条样式到滚动容器（即 .nav 外层或自身）：
.nav {
-webkit-overflow-scrolling: touch;
transform: translateZ(0);
}
漏掉任意一条，iOS 上一划就顿住或回弹失效。Android Chrome 虽不严格依赖，但加上更稳。
-
-webkit-overflow-scrolling: touch是 iOS 专属开关，不写等于放弃平滑滚动 -
transform: translateZ(0)强制 GPU 渲染，避免文字模糊（部分安卓机型有此问题） - 别用
scroll-behavior: smooth—— 手机端无实际效果，还可能干扰原生滚动
点击删除单个历史项时如何避免误触和状态残留
用户习惯长按删、左滑删，但网页里只能点叉。如果叉图标太小或离标签文字太近，拇指一按就同时触发标签跳转和删除——这是最常被忽略的交互雷区。
解决方案是「分离操作域」：
- 把删除按钮（
<button type="button" class="btn-close"></button>）单独包一层<span class="position-relative"></span> - 给按钮加
style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 2px;" - 确保父
.nav-link的pointer-events: auto，而按钮区域不拦截链接行为 - 点击后立即从 DOM 移除对应
.nav-item，别只 hide —— 否则滚动位置会错乱
历史数据从哪来、怎么存才不崩手机内存
别用 localStorage 存几百条搜索词。实测 iOS Safari 在存超 50 条、每条超 20 字符时，JSON.stringify 就开始明显延迟，再点几次页面直接无响应。
合理做法是「截断 + 去重 + 限长」：
- 每次新增前先
localStorage.getItem('searchHistory')，解析后用Array.from(new Set(...))去重 - 用
.slice(-10)只留最近 10 条（用户真不用翻第 11 条） - 每条搜索词用
.substring(0, 32)截断，防超长关键词撑爆存储 - 存之前做
try/catch，捕获QuotaExceededError后清空重置，而不是让整个功能静默失败
真正麻烦的不是显示，是历史项太多时滚动容器计算 layout 的开销 —— 标签超过 15 个，就得考虑虚拟滚动，但 Bootstrap 自带组件不支持，这时候该换轻量库了。
