Bootstrap 4: отображение значка, когда .table-отзывчивый становится горизонтальной прокрутки

Question

Я создаю приложение Rails с Bootstrap 4. У меня есть несколько больших таблиц для отображения, и, поскольку пользователи приложения не очень разбираются в технологиях, я хотел бы показать подсказку, когда полная таблица не соответствует их экран и становится прокручиваемым. Любые советы о том, как этого добиться?

Answer 1

Вы можете добавить alert с помощью class="something".

<div class="alert alert-primary something" role="alert">
  The table is scrollable!!!
</div>

Затем, в файле CSS вы можете сделать:

.something{
  display: none;
}

Затем также напишите медиазапрос, чтобы обновить класс something для отображения блока.

@media (min-width: 576px) {
  .something{
      display: block;
    }
}

Результат: предупреждение не будет отображаться, пока размер окна не уменьшится до 576 пикселей.