@alexeeey_kuznetsov

Как сделать коррекнтную работу функции resize()?

Мне необходимо при ресайзе экрана добавлять Bootstrap классы для элементов меню.
Всё, относительно, работает. Но при тесте, например, при смене на альбомную ориентацию устройства, некоторые классы, которые выходили за рамки условия ширины экрана, не соблюдались. Как, например, на изображении ниже.

5c52d65bae1ec583023172.png

Вопрос: как сделать корректное изменение разрешения экрана с помощью данной функции resize(), чтобы элементы постоянно проходили через условия и ,следовательно, отображались корректно?

Прикладываю только JS код, т.к. не вижу смысла в разметке CSS и HTML.
function _resize() {
		width=window.innerWidth;//учитывает ширину экрана с полосой прокрутки
		if (width >= 992) {
		$('.hot-line').removeClass('col-5 mr-auto offset-1');
		$('.brand-col').removeClass('col-4');
		}
		if (width <= 570){
		$('.brand-col').addClass('col-2');
		$('.brand-col').removeClass('col-4');
		$('.hot-line').addClass('m-auto justify-content-center');
		$('.hot-line').removeClass('col-5 mr-auto offset-1');
		}
		if(width <= 991 && width >= 571) {
			$('.hot-line').addClass('col-5 mr-auto offset-1');
			$('.brand-col').addClass('col-4');
			$('.hot-line').removeClass('m-auto justify-content-center');
			$('.brand-col').removeClass('col-2');

		}
		
	$(document).ready(function ()
	{
		_resize();
		$(window).resize(_resize);
});
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
именно по твоему коду - ошибка в том, что ты else не прописываешь. т.е. у тебя _resize() работает нормально. просто классы, которые уже были добавлены в одном месте не ремуваются. потому что else нет.

а по существу - все, что ты хочешь сделать - делается через html и css. такие классы как col-* offset-* и т.д. имеют -md, -lg и тд. через них можно только классами задать весь путь адаптивности.
а другие классы как justify-content-center - можно одним стилем менять в media запросах.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы