responsive-design - Bootstrap 4：当 .table-responsive 变为水平滚动时显示一个图标

Question

我正在使用 Bootstrap 4 构建一个 Rails 应用程序。我有许多大表要显示，并且由于应用程序用户不是很精通技术，我想在一个完整的表不适合他们的屏幕并变成时显示一个提示可滚动的。关于如何实现这一目标的任何提示？

Answer 1

您可以添加一个alertwith 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 像素之前，它不会显示警报。