用户Klaro建议恢复旧的可见性类，这是一个好主意。不幸的是，他们的解决方案在我的项目中不起作用。

我认为恢复bootstrap的旧mixin是一个更好的主意，因为它覆盖了用户可以单独定义的所有断点。

代码如下:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

在我的例子中，我将此部分插入到_custom中。此时包含在bootstrap.scss中的SCSS文件:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

使用Bootstrap 5.3版本(与版本4及更高版本相同)，我发现缺少非常清晰的演示，所以我做了以下说明。

在代码和渲染站点之间移动滑块，查看内容显示:

正好是一页大小 当小于特定页面大小时 当大于特定页面大小时

下面是一些好的代码:

<div>Show at exactly one size:</div>
<div class="d-xs-block d-sm-none">XS</div>
<div class="d-none d-sm-block d-md-none">SM</div>
<div class="d-none d-md-block d-lg-none">MD</div>
<div class="d-none d-lg-block d-xl-none">LG</div>
<div class="d-none d-xl-block">XL</div>
<hr>
<div>Hide when smaller than size or show when larger than size:</div>
<div class="d-none d-xs-block">XS or larger</div>
<div class="d-none d-sm-block">SM or larger</div>
<div class="d-none d-md-block">MD or larger</div>
<div class="d-none d-lg-block">LG or larger</div>
<div class="d-none d-xl-block">XL or larger</div>
<hr>
<div>Hide when larger than size or show when smaller than size:</div>
<div class="d-sm-none">XS or smaller</div>
<div class="d-md-none">SM or smaller</div>
<div class="d-lg-none">MD or smaller</div>
<div class="d-xl-none">LG or smaller</div>

我希望这能帮助到其他人。

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

来源:medium: Bootstrap 4 Hidden & Visible

不幸的是，这些新的引导类不像使用折叠的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-*，但它们也很有用，并且应该是自解释的。

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