Как сделать шапку как у юлы?

Question

[orbit070]

Всем привет.
Пытаюсь реализовать такое


Использую bootstrap, но там если разделять по секциям, то зазоры появляются между элементами, а на сайте все тютелька в тютельку. Пробовал запихнуть все элементы подряд в один , но не получается расположить в одной строке с другими элементами, то есть форма всегда начинается с новой строки. Как правильнее реализовать такое?

Вот ссылка на то что получилось, там нужно растянуть площадь отображения, чтобы правильно отобразилось. Подобное отображение требуется только для lg и больше.

Comments

[Rustam Bainazarov]

А если без Bootstrap?

[orbit070]

Рустам Байназаров, я пытался уйти от бутстраповского разделения на секции путем запихивания всего в одну секцию на всю ширину(col-lg-12) но как уже писал выше форма все равно сползала на новую строку, колдовал с display: inline но все равно форма с новой строки была. Мне не принципиален бутстрап, просто думал с ним легче будет

[Rustam Bainazarov]

orbit070, написал ответ.

Answer 1

[Rustam Bainazarov]

Ну ОК, конечно, но:
1. Я не понимаю, почему надо везде использовать Bootstrap и страдать, когда что-то внезапно на нем не выходит.
2. Я не понимаю, почему нельзя посмотреть код того, как сделано это на самом сайте «Юлы».

А-ля так:

Comments

[orbit070]

Большое спасибо, очень похоже на то что нужно, единственный момент - если я пытаюсь обернуть input поисковой строки в тег form и добавляю туда кнопку "Найти", то поисковая строка перестает растягиваться. Это надо с flex что-то делать?

[Rustam Bainazarov]

orbit070, обновил ответ.

[orbit070]

Рустам Байназаров, большущее Вам спасибо!

[Rustam Bainazarov]

orbit070, не за что!

Обновил ещё раз, добавил подсветку при активном поле поиска.

[orbit070]

Рустам Байназаров, круть, вообще один в один получилось, спасибо еще раз!)

[Александр Маргинал]

А потом у нас куча "вебов" с ворованными дизайнерами которые даже не знают как скрипт наш для рекламы у себя разместить *рукалицо"

[Rustam Bainazarov]

Александр Маргинал, прошу прощения?

Про скрипт рекламы вообще не понял, а про дизайн — ну это уже дело автора вопроса: использовать дизайн под копирку или же вдохновляться. Тут уже никто не запретит ему это делать.

Я лишь помог разобраться с тем, как делаются такие «шапки» без принятия во внимание референса.