Установить Bootstrap 4 свернуть по умолчанию скрыто или показано на основе точки останова

Question

Для целевого элемента Bootstrap 4 я бы хотел, чтобы он по умолчанию скрывался до точки останова XS и показывался по умолчанию на SM и выше.

Я знаю, что это можно сделать с помощью JavaScript, но мне было интересно, еслиМне не хватало решения только для CSS.

Например:

<a data-toggle="collapse" href="#collapse1" aria-expanded="false">Link with href</a>

<div class="row">
    <div id="collapse1" class="col-sm-3 collapse">
        Default on XS should be hidden, default on SM+ should be visible
    </div>
    <div class="col">
        Always visible, expands to full row when other column is hidden
    </div>
</div>

Answer 1

Я придумала собственное решение ...

Простое изменение поведения класса шоу свертывания в точке останова делает свою работу.

Я добавил класс обратного свертывания, который обращает вспятьповедение класса show на SM +.

CSS:

@media (min-width: 576px) {
    .collapse.collapse-reverse.show {display:none!important}
    .collapse.collapse-reverse:not(.show) {display:block!important}
}

HTML:

<a data-toggle="collapse" href="#collapse1" aria-expanded="false">Link with href</a>

<div class="row">
    <div id="collapse1" class="col-sm-3 collapse collapse-reverse">
        Default on XS should be hidden, default on SM+ should be visible
    </div>
    <div class="col">
        Always visible, expands to full row when other column is hidden
    </div>
</div>

Answer 2

Вы можете использовать медиа-запросы для переключения элемента в определенных окнах просмотра:

@media (max-width: 575px) {
  #collapse1 {
    display: none;
  }
  #collapse1.show {
    display: block;
  }
}

https://jsfiddle.net/36xfLyct/

Или для других случаев вы можете использовать классы начальной загрузки d-none d-sm-block вместе наВаш элемент, чтобы скрыть или показать их.

https://jsfiddle.net/5p9mwqg6/

Начальная загрузка документации об утилитах отображения: https://getbootstrap.com/docs/4.0/utilities/display/