Как расположить изображение рядом с текстовым вводом с помощью Bootstrap 5

Я пытаюсь разместить изображение увеличительного стекла слева от ввода текста. Он отображается над текстовым вводом. Как правильно хранить их рядом с Bootstrap 5?

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/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>
          <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>

Совет: не используйте разрывы строк для пробелов. Это не их цель. Используйте поля, отступы, гибкие функции и т. д. В Bootstrap есть все это.

— 09.05.2024 18:20

Совет: используйте классы CSS (либо Bootstrap, либо пользовательские) для стилей. Не используйте встроенные стили, которые затрудняют интерпретацию и поддержку вашего документа.

— 09.05.2024 18:21

Совет: похоже, вы используете пустые столбцы для центрирования формы. Это неправильный подход, поскольку дополнительная наценка представляет собой технический долг. Вместо этого посмотрите доступные свойства гибкого выравнивания (или просто выравнивание текста).

— 09.05.2024 18:23

html css twitter-bootstrap bootstrap-5

08.05.2024 16:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Гибкий подход работает отлично, спасибо!

— 09.05.2024 19:14

08.05.2024 20:36