引导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

引导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

不幸的是，这些新的引导类不像使用折叠的div上的旧类那样工作，因为他们将可见的div设置为块，开始时是可见的而不是隐藏的，如果你添加一个额外的div，折叠功能不再工作。

不幸的是，所有hidden-*-up和hidden-*-down类都从Bootstrap中删除了(截至Bootstrap版本4 Beta，在版本4 Alpha和版本3中这些类仍然存在)。

相反，应该使用新的类d-*，如这里提到的:https://getbootstrap.com/docs/4.0/migration/#utilities

我发现这种新方法在某些情况下用处不大。旧的方法是HIDE元素，而新方法是SHOW元素。用CSS显示元素并不那么容易，因为你需要知道元素是显示为块、内联、内联块还是表等。

你可能想用下面的CSS恢复Bootstrap 3中已知的前“hidden-*”样式:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

在Bootstrap 3中没有包含隐藏的类-unless-*，但它们也很有用，并且应该是自解释的。

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

来源:medium: Bootstrap 4 Hidden & Visible

我不期望多个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;
  }
}