Как управлять функцией коллапса при определенных размерах экрана

Question

В настоящее время я создаю отзывчивый веб-сайт, где я использую сворачиваемые панели для контента. Я просто хочу использовать разворачиваемую функцию для смартфонов из-за огромного количества контента.

Так у меня есть два сценария:

1. таблетки и смартфоны с минимальным пространстве экрана
2. Настольные экраны с достаточным пространством экрана

В основном я хочу функция Распад работать только на scenario 1, где все панели несовместимы по умолчанию. В scenario 2 все панели должны быть открыты, а функция коллапса должна быть отключена.

Поскольку я использую Bootstrap collapse.js, есть ли хороший способ справиться с этой задачей?

Answer 1

Медиа запрос может быть использован для предотвращения ваших панелей от разрушения на больших видовых.

CSS:

@media (min-width: 992px) { /*or 1200px if you just want it to affect the lg devices*/ 
    .collapsing { 
    height: auto !important; 
    } 
    .collapse { 
    height: auto !important; 
    display: block; 
    } 
} 

Как описано в доке здесь: http://getbootstrap.com/javascript/#collapse, крах плагин использует три класса для определения различных состояний свернутого элемента: .collapse (дисплей установлен на нет), .collapse.in (отображение установлено в блок) и .collapsing (когда элемент переходит). Вышеупомянутый медиа-запрос использует их и устанавливает состояние сжимания для отображения блока. Тем не менее, вам также необходимо переопределить стили высотой строки, которые применяются при запуске javascript, поэтому использование height: auto! Important как в состоянии свернуть и сворачиваться, приводит к игнорированию встроенных стилей в пользу важного правила.

EDIT

Смотрите комментарии ниже. Если вы обнаружите, что контент не отображается должным образом, попробуйте добавить visibility: visible; в правило .collapse в вышеуказанном запросе на медиа.