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

Question

[alexeeey_kuznetsov]

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



Вопрос: как сделать корректное изменение разрешения экрана с помощью данной функции 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);
});

Answer 1

[iBird Rose]

именно по твоему коду - ошибка в том, что ты else не прописываешь. т.е. у тебя _resize() работает нормально. просто классы, которые уже были добавлены в одном месте не ремуваются. потому что else нет.

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

Comments

[alexeeey_kuznetsov]

Про HTML и CSS ждал, но мне именно на определенных разрешениях необходимо.
Есть возможность впринципе сделать заменой классов на xs, md, lg.
Не понятно просто почему вроде бы базовая функция, а не работает и какие то классы не удаляет...