【问题标题】：Missing visible-** and hidden-** in Bootstrap v4Bootstrap v4 中缺少可见-** 和隐藏-**
【发布时间】：2016-05-22 22:31:48
【问题描述】：

在 Bootstrap v3 中，我经常使用 hidden-** 类结合 clearfix 来控制不同屏幕宽度的多列布局。例如，

我可以在一个 DIV 中组合多个 hidden-** 以使我的多列在不同的屏幕宽度下正确显示。

例如，如果我想显示多行产品照片，大屏幕每行 4 张，小屏幕每行 3 张，小屏幕上每行 2 张。产品照片的高度可能不同，因此我需要 clearfix 以确保行正确中断。

这是 v3 中的一个示例...

http://jsbin.com/tosebayode/edit?html,css,output

现在 v4 已经取消了这些类，并用可见/隐藏-**-向上/向下类替换它们，我似乎不得不对多个 DIV 做同样的事情。

这是 v4 中的一个类似示例...

http://jsbin.com/sagowihowa/edit?html,css,output

所以我已经从单个 DIV 转变为必须添加具有许多 up/down 类的多个 DIV 来实现相同的目标。

来自...

<div class="clearfix visible-xs-block visible-sm-block"></div>

到...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

在我忽略的 v4 中有没有更好的方法？

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

Bootstrap 5 (2020) 更新

Bootstrap 5（目前是 alpha）有一个新的 xxl 断点。因此display classes 有一个新的层来支持这一点：

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

引导程序 4（2018 年）

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

请记住，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（不适用 3.x）=d-none（与 hidden 相同）

断点及以上显示/隐藏：

hidden-xs-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（仅）=d-none d-sm-block（与hidden-xs-down相同）
hidden-sm（仅）=d-block d-sm-none d-md-block
hidden-md（仅）=d-block d-md-none d-lg-block
hidden-lg（仅）=d-block d-lg-none d-xl-block
hidden-xl (n/a 3.x) = d-block d-xl-none
visible-xs（仅）=d-block d-sm-none
visible-sm（仅）=d-none d-sm-block d-md-none
visible-md（仅）=d-none d-md-block d-lg-none
visible-lg（仅）=d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-none d-xl-block

Demo of the responsive display classes in Bootstrap 4

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

【讨论】：

我在测试版发布时发现了这一变化，我认为这比 alpha 版中的情况要好得多。感谢您添加答案 - 我将标记为解决方案。
@johna 情况更糟——不过。没有d-initial，因此您不能再覆盖d-<breakpoint>-hidden 并将其设置为其初始值。如果我想在较小的屏幕上隐藏一个元素，但在不知道初始显示（可能是动态的）的情况下在中等和较大的屏幕上显示它，那么我无法恢复它的值。他们没有想到这些。
@ThomasYates 我不太了解那个用例。初始显示属性值基于元素的 HTML/CSS 默认值（块、内联、表格等）。
有史以来最糟糕的更新。一个人如何从一个超级直观的“说话”概念变成一种神秘的东西？为此打开一个问题。他们至少可以让旧的类共存。
我真的很惊讶找到这个答案有多难。

【解决方案2】：

很遗憾，所有类 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;
    } 
}

hidden-unless-* 类未包含在 Bootstrap 3 中，但它们也很有用，应该是不言自明的。

【讨论】：

这仍然适用于当前版本的 B4 吗？这种能见度的废话是我懒得搬家的主要原因之一。有时我在编程时会很困惑，这只是让我头疼。（我 64 岁，所以让我休息一下！）另外（不要厚颜无耻）但是你有可见的等价物吗？ V 对同时拥有恕我直言（或无论如何我编码的方式 :-) ） ATB 史蒂夫很有用

【解决方案3】：

Bootstrap v4.1 使用新的类名来隐藏其网格系统上的列。

要根据屏幕宽度隐藏列，请使用d-none 类或任何d-{sm,md,lg,xl}-none 类。要在特定屏幕尺寸上显示列，请将上述类与 d-block 或 d-{sm,md,lg,xl}-block 类结合使用。

例如：

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

更多here。

【讨论】：

【解决方案4】：

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

来源：Meduim : Bootstrap 4 Hidden & Visible

【讨论】：

这是 Codeply 上 Medium 文章的实时链接：codeply.com/embed/…

【解决方案5】：

我不认为多个 div 是一个好的解决方案。

我还认为您可以将.visible-sm-block 替换为.hidden-xs-down 和.hidden-md-up（或.hidden-sm-down 和.hidden-lg-up 以处理相同的媒体查询）。

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 时，情况会有所不同。 Bootstrap 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;
  }
}

【讨论】：

【解决方案6】：

用户 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.scss 文件中，该文件此时包含在 bootstrap.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 4 方式似乎有点令人困惑，而且它添加了display: block，这在某些情况下会中断流程。

【解决方案7】：

引导程序 5

隐藏元素：

要隐藏元素，只需使用 .d-none 类或 .d-{sm,md,lg,xl,xxl}-none 类之一来实现任何响应式屏幕变化。

要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个.d-*-none 类与.d-*-* 类结合使用，例如.d-none .d-md-block .d-xl-none .d-xxl-none 将隐藏除中型和大型设备之外的所有屏幕尺寸的元素。

Screen size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none .d-xxl-block`
Hidden only on xxl	`.d-xxl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block .d-xxl-none`
Visible only on xxl	`.d-none .d-xxl-block`

打印显示：

使用我们的打印显示实用程序类进行打印时更改元素的显示值。包括对与我们的响应式 .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

【讨论】：

【解决方案8】：

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

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

.hidden-xs-down

会隐藏 xs 和更小的东西，只有 xs

.hidden-xs-up

会隐藏一切

【讨论】：

是的，我在我的 v4 示例中使用了这些，但问题是我现在需要多个 DIV，而在 v3 中我可以使用一个...
此解决方案已过时，仅对 Bootstrap V4 Alpha、Beta 及更高版本有效，不幸的是，这些需要按照上述 ocmments 中的说明进行替换

【解决方案9】：

Bootstrap 4 隐藏整个内容使用此类 '.d-none' 它将隐藏所有内容，无论断点如何，与以前的引导版本类 '.hidden' 相同

【讨论】：

【解决方案10】：

不幸的是，这些新的 bootstrap 4 类不像使用 collapse 的 div 上的旧类那样工作，因为它们将可见 div 设置为 block，这开始时是可见的而不是隐藏的，如果你在 @ 周围添加一个额外的 div 987654323@ 功能不再起作用。

【讨论】：

【解决方案11】：

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>

【讨论】：

【解决方案12】：

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

【讨论】：