在Bootstrap 4中不再存在hidden-*和visible-*类。在Bootstrap 4中，通过对特定层使用d-*可以实现相同的功能。

Bootstrap 4隐藏整个内容使用这个类。D-none '它将隐藏所有内容，无论断点与之前的引导版本类相同'.hidden'

我不期望多个div是一个很好的解决方案。

我还认为你可以用。hidden-xs-down和。hidden-m -up(或者。hidden-sm-down和。hidden-lg-up来替换。visible-sm-block)。

Hidden-sm-up编译成:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-down和.hidden-lg-up编译成:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

这两种情况应该是一样的。

当你尝试替换.visible-sm-block和.visible-lg-block时，情况就不同了。引导v4文档告诉你:

这些类不试图适应不太常见的情况 元素的可见性不能表示为单个连续的范围 视口断点大小的;你将需要使用自定义CSS 在这种情况下。

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

引导5

隐藏元素:

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

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

打印显示:

使用打印显示实用工具类打印时更改元素的显示值。包括支持与响应性.d-*实用程序相同的显示值。

.d-print-none .d-print-inline .d-print-inline-block .d-print-block .d-print-grid .d-print-table .d-print-table-row .d-print-table-cell .d-print-flex .d-print-inline-flex

对于引导4，这是一个矩阵图像，解释了用于显示/隐藏元素的类取决于屏幕大小:

来源:medium: Bootstrap 4 Hidden & Visible

Bootstrap v4.1使用新的类名来隐藏网格系统中的列。

要根据屏幕宽度隐藏列，请使用d-none类或d-{sm,md,lg,xl}-none类中的任何一个。 要在特定屏幕尺寸上显示列，请将上述类与d-block或d-{sm,md,lg,xl}-block类结合起来。

例子有:

<div class="d-lg-none">隐藏在比lg宽的屏幕上</div> <div class="d-none d-lg-block">隐藏在小于lg的屏幕上</div>

这里还有更多。