如何将输入字段改为搜索图标？移动端如何实现字段转图标？

嘿，这两个需求用Bootstrap 4就能轻松搞定，我给你一步步拆解实现方法：

你可以借助Bootstrap的input-group组件，在输入框前添加一个包含搜索图标的前置元素。这里我们用常用的搜索图标（记得先确保你已经引入了图标库的CSS，比如Font Awesome这类）：

修改后的核心代码片段如下：

<div class="col-6">
  <div class="divLogo input-group" style="float: right;">
    <!-- 新增带搜索图标的前置组 -->
    <div class="input-group-prepend">
      <span class="input-group-text bg-light">
        <i class="fas fa-search"></i> <!-- 搜索图标 -->
      </span>
    </div>
    <input class="form-control" type="text" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-danger" type="submit">BUSCAR</button>
    </div>
  </div>
</div>

这样输入框左侧就会和搜索图标整合在一起，完全符合Bootstrap的组件设计风格。

在移动端，我们可以默认隐藏输入框，只显示搜索图标，点击图标后再展开输入框。这里结合Bootstrap的响应式工具类和一点简单的JavaScript来实现：

完整的示例代码：

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <!-- 引入图标库CSS（比如Font Awesome，若未添加请自行引入） -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="col-6">
    <div class="divLogo input-group" style="float: right;">
      <!-- 移动端专属的搜索图标按钮 -->
      <button class="btn btn-light d-md-none" id="mobile-search-toggle">
        <i class="fas fa-search"></i>
      </button>
      <!-- 桌面端显示的搜索图标前置组 -->
      <div class="input-group-prepend d-none d-md-block">
        <span class="input-group-text bg-light">
          <i class="fas fa-search"></i>
        </span>
      </div>
      <!-- 输入框：移动端默认隐藏，大屏显示 -->
      <input class="form-control d-none d-md-block" id="mobile-search-input" type="text" placeholder="Search">
      <div class="input-group-btn">
        <button class="btn btn-danger" type="submit">BUSCAR</button>
      </div>
    </div>
  </div>

  <script>
    // 点击移动端搜索图标切换输入框显示状态
    document.getElementById('mobile-search-toggle').addEventListener('click', function() {
      const searchInput = document.getElementById('mobile-search-input');
      // 切换响应式显示类
      searchInput.classList.toggle('d-none');
      searchInput.classList.toggle('d-block');
      // 展开后自动聚焦输入框，提升体验
      searchInput.focus();
    });
  </script>
</body>
</html>

关键说明： #

• 用Bootstrap的响应式类d-md-none让搜索图标按钮只在小屏幕（手机）上显示，d-none d-md-block让输入框和桌面端的图标前置组只在中等及以上屏幕（平板、桌面）显示。
• 点击移动端的搜索图标时，通过JavaScript切换输入框的显示状态，并且自动聚焦输入框，让用户可以直接开始输入。

如果你不想写自定义JS，也可以用Bootstrap自带的折叠（Collapse）组件来实现，不过上面的方式更直接易懂。

内容的提问来源于stack exchange，提问作者R.Park