如何在引导程序 4 中仅在特定屏幕尺寸上显示某些内容？

Question

所以我希望能够仅在md屏幕上的 html 上显示图像。我想从 sm 和向下隐藏图像，从 lg 和向上隐藏。

反正我能做到吗？

Answer 1

在 Bootstrap v4+ 中，您可以使用这些类d-none d-md-block d-lg-none使内容仅在中等 ( md) 屏幕尺寸上可见。

d-none - 隐藏在所有视口上

d-md-block - 在中等及以上可见

d-lg-none - 隐藏在大型及以上

<div class="d-none d-md-block d-lg-none">
  <img src="" alt="alternate text" />
</div>

从文档：

要隐藏元素，只需将.d-none类或类之一.d-{sm,md,lg,xl}-none用于任何响应式屏幕变化。

要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个.d-*-none类与一个.d-*-*类组合，例如，.d-none .d-md-block .d-xl-none将隐藏除中型和大型设备之外的所有屏幕尺寸的元素。