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

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

使用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>

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

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

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

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

.hidden-xs-down

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

.hidden-xs-up

会隐藏一切

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