Bootstrap v4 中缺少可见-** 和隐藏-**

Posted 2023-02-16

【中文标题】Bootstrap v4 中缺少可见-** 和隐藏-**

【英文标题】：Missing visible-** and hidden-** in Bootstrap 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 中有没有更好的方法？

【参考方案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 建议恢复旧的可见性类，这是个好主意。不幸的是，他们的解决方案在我的项目中不起作用。

我认为恢复旧的 bo​​otstrap 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-xsdisplay:none !important; 
@media (min-width:576px) and (max-width:767px)   .hidden-smdisplay:none !important; 
@media (min-width:768px) and (max-width:991px)   .hidden-mddisplay:none !important; 
@media (min-width:992px) and (max-width:1199px)  .hidden-lgdisplay:none !important; 
@media (min-width:1200px)                        .hidden-xldisplay:none !important; 
</pre>

【参考方案12】：

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