应使用 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 放前面，语义更清晰

导航栏里加搜索框时的典型结构陷阱

在

中，搜索框常放在

内。此时需额外注意父容器的折叠逻辑。

• 如果导航栏在 sm 下已折叠（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 这类类就彻底失效。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 安全做法：只用 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 却还是看不到”，往往卡在这里反复调试。