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

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

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

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

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

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

引导5更新(2021年)

引导5有一个新的xxl断点。因此，显示类有一个新的层来支持:

仅在xxl: d-xxl-none上隐藏 仅在xxl: d-none d-xxl-block上可见

Bootstrap 4 (2018)

在Bootstrap 4中不再存在hidden-*和visible-*类。如果你想在Bootstrap 4中的特定层或断点上隐藏一个元素，请相应地使用d-* display类。

请记住，extra-small/mobile(以前是xs)是默认的(隐含的)断点，除非被更大的断点覆盖。因此，在Bootstrap 4中不再存在-xs中缀。

显示/隐藏断点和下:

hidden-xs-down (hidden-xs) = d-none d-sm-block hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block Hidden-lg-down = d-none d-xl-block hidden-xl-down (n/a 3.x) = d-none(与hidden相同)

显示/隐藏断点和断点以上:

hidden-x -up = d-none(与hidden相同) Hidden-sm-up = d-sm-none Hidden-md-up = d-md-none Hidden-lg-up = d-lg-none Hidden-xl-up (n/a 3.x) = d-xl-none

仅显示/隐藏单个断点:

Hidden-xs (only) = d-none d-sm-block(与Hidden-xs -down相同) Hidden-sm (only) = d-block d-sm-none d-md-block Hidden-md (only) = d-block d-md-none d-lg-block Hidden-lg (only) = d-block d-lg-none d-xl-block Hidden-xl (n/a 3.x) = d-block d-xl-none Visible-xs (only) = d-block d-sm-none Visible-sm (only) = d-none d-sm-block d-md-none Visible-md (only) = d-none d-md-block d-lg-none Visible-lg (only) = d-none d-lg-block d-xl-none Visible-xl (n/a 3.x) = d-none d-xl-block

Bootstrap 4中响应式显示类的演示

另外，注意d-*-block可以替换为d-*-inline, d-*-flex, d-*-table-cell, d-*-table等。这取决于元素的显示类型。阅读更多关于显示类的信息