Bootstrap响应式布局：sm尺寸下隐藏搜索框替换为搜索按钮

没问题！咱们可以用Bootstrap的响应式工具类结合一点JavaScript来实现你要的小屏搜索效果，下面是具体的修改方案：

首先调整HTML结构加入搜索触发按钮，再用Bootstrap的响应式类控制不同屏幕的显示/隐藏，最后加一点交互逻辑完成需求。

1. 修改后的HTML代码 #

<div class="container">
  <div class="header">
    <div class="row align-items-center">
      <!-- Logo 列 -->
      <div class="col-md-3">
        <img src="img/1.png" class="header-logo" alt="site-logo">
      </div>

      <!-- 搜索框（仅中等及以上屏幕显示） -->
      <div class="col-md-6 d-none d-md-block">
        <div class="input-group search-box">
          <div class="input-group-prepend">
            <span class="input-group-text">
              <i class="fas fa-search"></i>
            </span>
          </div>
          <input type="text" class="form-control" placeholder="جستجو">
        </div>
      </div>

      <!-- 按钮列：登录/注册 + 小屏搜索按钮 -->
      <div class="col-md-3 btn-header d-flex justify-content-end">
        <!-- 小屏搜索触发按钮（仅小屏显示） -->
        <button class="btn d-block d-md-none me-2" id="mobileSearchBtn">
          <i class="fas fa-search"></i>
        </button>
        <button class="btn">ورود</button>
        <button class="btn ms-2">ثبت نام</button>
      </div>
    </div>

    <!-- 小屏弹出式搜索框（默认隐藏） -->
    <div class="mobile-search-container d-md-none d-none fixed-top w-100 bg-white p-3 shadow-sm" id="mobileSearchContainer">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <i class="fas fa-search"></i>
          </span>
        </div>
        <input type="text" class="form-control" placeholder="جستجو">
        <button class="btn btn-close" id="closeSearchBtn"></button>
      </div>
    </div>
  </div><!-- =====HEADER DIV===== -->
</div>

2. 补充CSS（优化样式，可选） #

因为你的界面用了波斯语（RTL布局），可以加一点自定义样式适配：

/* 适配RTL布局，调整搜索框内元素对齐 */
.mobile-search-container .input-group {
  direction: rtl;
}

/* 让小屏搜索按钮和其他按钮样式统一 */
#mobileSearchBtn {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

3. JavaScript实现交互逻辑 #

添加这段代码处理搜索框的弹出和关闭：

// 获取页面元素
const mobileSearchBtn = document.getElementById('mobileSearchBtn');
const mobileSearchContainer = document.getElementById('mobileSearchContainer');
const closeSearchBtn = document.getElementById('closeSearchBtn');

// 点击按钮打开搜索框并自动聚焦输入框
mobileSearchBtn.addEventListener('click', () => {
  mobileSearchContainer.classList.remove('d-none');
  mobileSearchContainer.querySelector('input').focus();
});

// 点击关闭按钮隐藏搜索框
closeSearchBtn.addEventListener('click', () => {
  mobileSearchContainer.classList.add('d-none');
});

// 点击搜索框外部区域也能关闭搜索框
document.addEventListener('click', (e) => {
  if (!mobileSearchContainer.contains(e.target) && e.target !== mobileSearchBtn) {
    mobileSearchContainer.classList.add('d-none');
  }
});

关键细节说明 #

• 响应式控制：用Bootstrap的d-none d-md-block让搜索框仅在中等及以上屏幕显示；d-block d-md-none让搜索触发按钮仅在小屏显示。
• 小屏体验优化：弹出式搜索框用fixed-top固定在顶部，全屏宽度设计，保证移动端操作便捷。
• 交互细节：打开搜索框自动聚焦输入框，支持关闭按钮和点击外部关闭，符合移动端用户习惯。

内容的提问来源于stack exchange，提问作者Amir Meimari