Горизонтальный скроллинг на телефоне - прокрутка панелей вправо на мобильном экране
Данная разметка позволит вывести некоторые элементы на странице на ПК (как колонки или просто друг под другом блоки), а на мобильном они будут выводиться со скроллингом вправо.
Атрибут 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>
Другие демостенды
— Вывод таблицы на сайте в личном кабинете— Полный и компактный вид таблицы на сайте в личном кабинете
Что есть в базе знаний по этой теме
— Отображение таблиц на смартфоне— Установка фоновой панели для формы
— Как сделать сворачивание таблицы (collapse table)
— Создание сущности с учетом значений фильтров
— Базовая верстка для каталога элементов
— Как сделать в каталоге List переключение вида элементов каталога
Последние обновления
Интеграции 24.11.2025
Разное 24.11.2025
Форма 15.11.2025
Визуализация 02.11.2025
Таблица 08.10.2025
Форма 26.09.2025
Таблица 23.09.2025
Разное 23.08.2025
Таблица 21.08.2025
Форма 20.08.2025
Таблица 18.08.2025
Таблица 21.06.2025
Форма 07.06.2025
Форма 29.03.2025
Форма 17.02.2025
Файлы и документы 10.01.2025
Форма 01.11.2024
Форма 23.10.2024
SQL-инструмент для создания личных кабинетов на сайте
Платформа Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки
Это быстрое внесение изменений
по ходу эксплуатации программы
Это современный интерфейс
полная адаптация под мобильные устройства