Bootstrap 4 Высота колонки в мобильном телефоне против рабочего стола

Question

У меня есть два столбца для рабочего стола размером 6 каждый.

В мобильном устройстве эти столбцы должны соответствовать высотетелефон, то есть

Как мы можем иметь переменную высоту с Bootstrap 4 в зависимости от устройства?

Что я использовал, это

<div class="row h-100">
    <div class="col-xl-6 h-100"></div>
    <div class="col-xl-6 h-100"></div>
</div>

Как сделать так, чтобы h-100 варьировалось в зависимости от устройства, например h-sm-50 и h-xl-100?

Answer 1

Нет класса высоты, изменяемого в зависимости от устройства.

единственная доступная вещь зависит от области просмотра. Размер начальной загрузки

, поэтому вы можете использовать пользовательский класс для назначения полной высоты. только в мобильном представлении с использованием css медиа-запросов

Пример

HTML

<div class="row h-100">
    <div class="col-xl-6 mobile-100"></div>
    <div class="col-xl-6 mobile-100"></div>
</div>

Пользовательский CSS

@media only screen and (max-width: 600px) {
  .mobile-100 {height:100vh}
}