FedyaAsker
@FedyaAsker
Постоянно что то не понимаю...

Как адаптировать бутстрапный аккордион для экрана 768px?

Подскажите, как можно адаптировать бутстрапный аккордион для бОльших разрешений так, чтобы открывающийся блок с текстом, растягивался на ширину контейнера, при том, чтобы кнопки оставались на своих местах, а выпадающий контент сдвигал нижние кнопки вниз...То есть вариант вырывать выпадашку из потока через position: absolute; не канает

Вот как есть, и должно быть на мобилке:
spoiler

6387a5f5c495e573243418.png


Вот как должно быть на 768+ разрешении:
spoiler

6387a62280158537886253.png
6387a62abb583226085342.png
6387a63543caa955027938.png


Прилагаю ссылку на codepen: https://codepen.io/Omn1scient/pen/zYaJJeE
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
ProjectSoft
@ProjectSoft
Front-end && Back-end разработчик
.accordion-item .accordion-collapse {
	position: relative;
	z-index: 1;
}
@media(min-width: 768px) {
	.accordion-item:nth-child(3n+1) .accordion-collapse {
		margin-right: -200%;
	}
	.accordion-item:nth-child(3n+2) .accordion-collapse {
		margin-right: -100%;
		margin-left: -100%;
	}
	.accordion-item:nth-child(3n+3) .accordion-collapse {
		margin-left: -200%;
	}
}

Ну а дальше стилизуешь сам с бордерами.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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