Горизонтальный скроллинг на телефоне - прокрутка панелей вправо на мобильном экране

Card content 1
Card Content 2
Card Content 3

Данная разметка позволит вывести некоторые элементы на странице на ПК (как колонки или просто друг под другом блоки), а на мобильном они будут выводиться со скроллингом вправо.

Атрибут data-slideout-ignore используется для того, чтобы скроллинг не приводил к открытию основного меню. 

Как реализовать: 

<style type="text/css">
  @media only screen and (max-width : 576px)
  {
    .as-mob-card-container > .row {
      overflow-x: auto;
    }
  }
  .as-mob-card-item {
    background-color: #ffffff;
    border-radius: 6px;
    margin-bottom: 16px;
    min-height: 100px;
    -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  }

</style>
<div class="as-mob-card-container " data-slideout-ignore="">
  <div class="row text-center flex-nowrap flex-sm-wrap">
    <div class="col-12 col-md-4 as-mob-card-item mx-sm-auto bg-danger">
      Card content 1
    </div>
    <div class="col-12 col-md-4 as-mob-card-item mx-sm-auto bg-primary">
      Card Content 2
    </div>
    <div class="col-12 col-md-4 as-mob-card-item mx-sm-auto bg-info">
      Card Content 3
    </div>    
  </div>
</div>
Насколько полезна эта возможность?

Другие модули

Последние обновления

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства