http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

现在，您必须定义隐藏内容的大小

.hidden-xs-down

会对xs和更小的部分隐藏吗，只有xs

.hidden-xs-up

会隐藏一切

不幸的是，所有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-*，但它们也很有用，并且应该是自解释的。

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

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

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

这里还有更多。