如何使用Bootstrap 5实现图片与文本输入框并排布局

Bootstrap 5提供了**输入组（Input Group）**组件，专门用于在文本输入框的前后添加图标、按钮或其他元素，这是实现你需求的标准方式，无需自定义复杂布局。

修改后的代码： #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container-fluid mt-3" style="background-color: white;">
  <form method="GET" class="override-navbar-form col-sm-12" action="#">
    <div class="row">
      <div class="col"></div>
      <div class="col-sm-5 mx-auto">
        <div class="text-black text-center">
          <label for="query_text"></label>
          <!-- 使用Bootstrap输入组组件实现并排 -->
          <div class="input-group mb-3">
            <span class="input-group-text p-0">
              <img style="max-height: 15px; padding: 0 8px;" src="/static/images/mag_glass.png" alt="搜索">
            </span>
            <input type="text" id="query_text" name="query_text" value="{{ query_text }}" class="form-control" placeholder="Search...">
          </div>
          <button type="submit" class="search-button" style="margin-right: 5px" name="submit_type" value="search">Search</button>
        </div>
      </div>
      <div class="col"></div>
    </div>
  </form>
</div>

关键说明： #

• 使用input-group作为容器，它内置Flex布局，自动让内部元素并排对齐。
• 把放大镜图片放在input-group-text容器中，这个类会处理元素的垂直对齐和内边距，确保和输入框高度匹配，也可根据需求调整样式。
• 移除原有的<br>标签，改用mb-3类给输入组添加底部间距，保持布局整洁。

如果不想用输入组组件，也可以手动用Flex工具类实现：

<!-- 手动Flex布局方案 -->
<div class="d-flex align-items-center mb-3">
  <img style="max-height: 15px; margin-right: 8px;" src="/static/images/mag_glass.png" alt="搜索">
  <input type="text" id="query_text" name="query_text" value="{{ query_text }}" class="form-control flex-grow-1" placeholder="Search...">
</div>

这种方式更灵活，flex-grow-1能让输入框占满剩余空间，适合不需要输入组默认样式的场景。

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