Boostrap 4 - набор предметов на мобильный

Question

Вопрос новичка, но я борюсь с этим почти два дня. У меня проблема с размещением заголовка в отдельной строке и двумя кнопками в другой строке. Прямо сейчас эти три элемента находятся в каждой строке. Моя цель - иметь заголовок сверху и две кнопки в нижней части панели навигации. https://www.codeply.com/go/bUI3pKQmR6

Заранее спасибо.

Answer 1

Вы можете использовать этот CSS, чтобы расположить кнопку на 10 пикселей снизу и заголовок слева ниже 745 пикселей, то есть, когда она станет 2 строками:

@media only screen and (max-width: 745px) {
.navbar {
height: 100px;
}

.navbar-brand {
position: absolute;
left: 28px;
top: 10px;
}

.dropdown ,ml-auto {
position: absolute;
bottom: 10px;
right: 28px;
}

.navbar-toggler-icon {
position: absolute;
bottom: 10px;
}
}

Редактировать: я добавил CSS, чтобы установитьвысота для панели навигации и расположите выпадающую кнопку справа.