Наличие проблем с вводом поиска и кнопкой отправки внутри Navbar в небольших решениях ⇐ CSS

[Anonymous]

Я делал представление поиска на веб-страницу, когда понял, что окно поиска, и кнопка отправки рядом с ней (выровненная вправо на большинстве ширины экрана) выйдет из наложения, когда в очень маленьких максимальных ширинах.
Я использую Bootstrap 4, поэтому я использовал ".ml-auto", чтобы выровнять эти элементы слева от Navbar, работая нормально, кроме как в этом случае (как я знаю, элементы в навигациях ведут себя разными в начальной загрузке). Файлы CSS и JS импортируются правильно (убедитесь, что перед написанием этого). Вот некоторые фрагменты кода, чтобы вы могли увидеть проблему:
html

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

bitDump






O

Custom css (дополнение Bootstrap)

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

* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: #000;
}

a:hover {
text-decoration: none;
color: #000;
}

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #ddd;
font-weight: normal;
}

.navbar-tweak {
border-radius: 5px;
background-color: #6c757d;
border-color: #5a6268;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.page-header {
padding-bottom: 5px;
margin: 20px 0 10px;
border-bottom: 1px solid #eee;
}

смещение можно увидеть в https://www.codeply.com/p/t3d3cgzcya, на вертикальном разрешении телефона (IIRC это шириной 360px)
Есть идеи, как это исправить?

Подробнее здесь: https://stackoverflow.com/questions/641 ... avbar-at-s