应使用 d-none d-lg-block 组合实现仅大屏显示搜索框，因 d-lg-block 仅在≥1200px设为 block，不控制小屏行为；需先全局隐藏再目标断点解禁，且须注意父容器 collapse 断点匹配。
为什么只加 d-lg-block 搜索框在小屏不隐藏
因为 d-lg-block 仅表示“在 ≥1200px（lg 及以上）时设为 display: block”，它**不控制其他尺寸下的行为**。小屏下该元素仍继承原有 display 值（比如 inline 或 flex），或受父容器、其他 class 影响，结果就是“该藏没藏”。
-
d-lg-block不等于 “只在 lg+ 显示”，它只是“lg+ 时强制 block”，其余尺寸完全不管 - Bootstrap 响应式类默认是“向上生效”：比如
d-md-block在 md/sm/xs 都生效，除非被更高优先级规则覆盖 - 想实现“仅 lg+ 显示”，必须先切断更小尺寸的显示通路
正确写法：必须组合 d-none + d-lg-block
这是最常见也最容易漏掉的组合逻辑。先全局隐藏，再在目标断点“解禁”显示。
- 搜索框只在大屏及以上显示：
d-none d-lg-block - 如果还想在超大屏（xxl）也保持可见，不用额外加 ——
d-lg-block已覆盖 xxl - 不要写
d-sm-none d-md-none d-lg-block：冗余且易出错，d-none已覆盖所有尺寸 - 注意顺序无关紧要，但习惯上把
d-none放前面，语义更清晰
导航栏里加搜索框时的典型结构陷阱
在 <nav class="navbar navbar-expand-md"></nav> 中，搜索框常放在 <div class="collapse navbar-collapse"> 内。此时需额外注意父容器的折叠逻辑。
<ul>
<li>如果导航栏在 sm 下已折叠（<code>navbar-expand-md），而你又给搜索框加了 d-none d-lg-block，那它在 md 屏（768–991px）会消失 —— 因为父容器未展开，子元素即使有 d-md-block 也无法突破 collapse 的 display:none
navbar-expand-lg，让 collapse 从 lg 开始触发；要么把搜索框移出 collapse 容器（如放在 navbar-brand 同级）invisible 替代 d-none：它只是 visibility: hidden，仍占位、可聚焦、屏幕阅读器可读，且与 d- 类混用会冲突JS 动态切换时怎么避免破坏响应式逻辑
直接操作 style.display 是最大雷区 —— 一旦写死 display: block，d-lg-none 这类类就彻底失效。
- 安全做法：只用
classList.add()/classList.remove()管理d-类 - 例如点击按钮临时显示搜索框：
searchInput.classList.remove('d-none'); searchInput.classList.add('d-block');—— 但这会覆盖响应式，慎用 - 真正响应式友好的动态控制：保留
d-none d-lg-block，仅通过 JS 切换是否添加d-lg-none来临时隐藏（即searchInput.classList.toggle('d-lg-none')） - 切记：JS 修改前先
classList.remove()所有相关d-类，再按需重设，避免残留冲突
collapse 触发断点和子元素响应式断点不一致——两者差一个层级，视觉上“明明写了 d-lg-block 却还是看不到”，往往卡在这里反复调试。
