如何使用 Bootstrap 5 将图像与文本输入并排放置

Question

我正在尝试将放大镜图像放置在文本输入的左侧。它被渲染在文本输入上方。让它们与 Bootstrap 5 并存的正确方法是什么？

            <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>
                            <img style="max-height: 15px" src="/static/images/mag_glass.png" alt="">
                            <input type="text" id="query_text" name="query_text" value="{{ query_text }}" class="form-control" placeholder="Search...">
                            <br>
                            <br>
                            <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>

Answer 1

至少有三种不同的方法可以做到这一点：

• 弯曲
• 网格
• 输入组

这是使用每个的示例：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 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>

          <div class="d-flex align-items-center">
            <img style="max-height: 15px" src="https://placehold.co/15" alt="">
            <input type="text" id="query_text" name="query_text" value="I'm in a .d-flex" class="form-control ms-1" placeholder="Search...">
          </div>

          <div class="row gx-1 align-items-center">
            <div class="col-auto">
              <img style="max-height: 15px" src="https://placehold.co/15" alt="">
            </div>
            <div class="col">
              <input type="text" id="query_text" name="query_text" value="I'm in a .col in a .row" class="form-control" placeholder="Search...">
            </div>
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1"><img style="max-height: 15px" src="https://placehold.co/15" alt=""></span>
            <input type="text" id="query_text" name="query_text" value="I'm in an .input-group" class="form-control" placeholder="Search...">
          </div>

          <br>
          <br>
          <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>