Проблема с адаптивным макетом заголовка в Bootstrap: выравнивание логотипа и панели поиска в мобильном представлении ⇐ CSS

[Anonymous]

Сейчас я создаю адаптивный заголовок с помощью Bootstrap. Макет работает нормально в настольной версии, но в мобильной версии возникают некоторые проблемы с выравниванием. Вот краткое описание того, чего я пытаюсь достичь, и проблем, с которыми сталкиваюсь:
Панель поиска состоит из двух элементов div: Input type="text" и Input type="submit"

•  – я хочу, чтобы ввод type="text" занимал 80 % доступной ширины и выравниваться по левому краю.
  Кнопка отправки должна занимать оставшиеся 10 % и выравниваться по правому краю (у нас осталось отступ в 10 %).< /li>

Я пробовал использовать классы Bootstrap d-flex, justify-content и text-end, но они не создают желаемого макета.
Вот мой текущий код:

Код: Выделить всё

[img]../logo_msp_Part.png[/img]

Я пытаюсь настроить ширину классов col-*, чтобы столбцы были пропорциональными.
Использовал d-flex и justify-content-start/justify-content-end классы в полях ввода.
Использовал классы w-100 и w-80, чтобы попытаться контролировать ширину ввода текста и кнопки отправки.
Также я удалил CSS, касающийся заголовка в медиа-запросах, чтобы избежать конфликт из-за CSS и начальной загрузки.

Подробнее здесь: https://stackoverflow.com/questions/790 ... bar-in-mob