Ломается шапка на маленьких экранах
Я сделал на странице кнопку меню, появляющуюся при определенных размерах экрана (с помощью bootstrap), она появляется, как и должна, но при размере экрана в <576px кнопка уезжает под поле поиска, сжимаясь до 1 пикселя (почему-то). Пытался лечить добавляя 2 контейнера (лого и кнопки) в один родительский, но тогда при больших размерах поле поиска назад в центр не возвращается, оставаясь внизу. Что делать-то? Может есть какие полезные свойства объектов?
<header class="main-head">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-10">
<a href="#" class="logo"><img src="img/Logo.svg" alt="Bilb"></a>
</div>
<div class="col-md-2 col-md-push-8 col-sm-6 col-sm-push-8 col-xs-2 registration">
<div class="hidden-xs hidden-sm">
<div>
<h1>
<a href="#">
Войти
</a>
</h1>
</div>
<a href="#"><h2>Регистрация</h2></a>
</div>
<div class="hidden-lg hidden-md">
<a href="#" class="toggle-mnu"><span></span></a>
</div>
</div>
<div class="col-lg-8 col-md-7 col-md-pull-2 col-sm-12 col-sm-pull-1 col-12 search">
<form>
<p>
<input type="search" class="search_pole" placeholder="Поиск по сайту">
<button type="submit" class="fas fa-search search_btn"></button>
</p>
</form>
</div>
</div>
</div>
</header>
Ответы (1 шт):
Автор решения: Dexium
→ Ссылка
"А ларчик просто открывался". Проблема заключалась в классе bootstrap "row", из-за которого все элементы блока были в строку. Вслед за поиском сносило и кнопку, что было исправлено с удалением этого класса

