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

Question

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

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

举个例子，如果我想显示多行产品照片，在大屏幕上每行 4 张，在小屏幕上每行 3 张，然后在非常小的屏幕上每行 2 张。产品照片的高度可能不同，因此我需要 clearfix 以确保正确换行。

这是 v3 中的示例...

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

现在 v4 已经取消了这些类，并用 visible/hidden-**-up/down 类替换了它们，我似乎必须这样做使用多个 DIV 也是一样。

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

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

所以我已经从单个 DIVs 变成了必须添加多个 DIVs 和很多 up/down 类来实现同样的事情。

从...

<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 中是否有我忽略的更好的方法？

Answer 1

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

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

.hidden-xs-down

将隐藏 xs 及更小的任何内容，仅 xs

.hidden-xs-up

将隐藏所有内容

Answer 2

我不认为多个 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 文档告诉你：

These classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.

.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;
  }
}

Answer 3

不幸的是，所有类 hidden-*-up 和 hidden-*-down 已从 Bootstrap 中删除（截至 Bootstrap 版本 4 Beta，在版本 4 Alpha 和版本 3 中这些类仍然存在）。

相反，应该使用新的类 d-*，如此处所述：https://getbootstrap.com/docs/4.0/migration/#utilities

我发现新方法在某些情况下用处不大。旧方法是 HIDE 元素，而新方法是 SHOW 元素。使用 CSS 显示元素并不那么容易，因为您需要知道元素是否显示为块、内联、内联块、table 等

您可能希望使用此 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 中，但它们也很有用，应该是不言自明的。

Answer 4

更新 Bootstrap 5 (2020)

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

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

Bootstrap 4 (2018)

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

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

Show/hide for 断点往下:

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)

Show/hide 断点及以上:

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

Show/hide 仅针对单个断点:

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

Answer 5

用户 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";
[..]

Answer 6

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

Answer 7

Bootstrap v4.1 使用新的 class 名称来隐藏其网格系统中的列。

要根据屏幕宽度隐藏列，请使用 d-none class 或任何 d-{sm,md,lg,xl}-none classes。要在特定屏幕尺寸上显示列，请将上面提到的 classes 与 d-block 或 d-{sm,md,lg,xl}-block classes.

组合

例子是：

<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。

Answer 8

Bootstrap 4 隐藏全部内容使用此 class '.d-none' 它将隐藏所有内容，无论断点如何以前的 bootstrap 版本 class '.hidden'

Answer 9

对于 bootstrap 4，这里有一个矩阵图像解释类用于显示/隐藏元素取决于屏幕尺寸：

来源：Meduim : Bootstrap 4 Hidden & Visible

Answer 10

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>

Answer 11

hidden-*和visible-*类在Bootstrap4中已经不存在了，在Bootstrap4中使用d-*可以实现同样的功能特定等级。

Answer 12

BOOTSTRAP 5

隐藏元素：

要隐藏元素，只需使用 .d-none class 或 .d-{sm,md,lg,xl,xxl}-none class 之一即可用于任何响应式屏幕变体。

要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个 .d-*-none class 与一个 .d-*-* class 组合，例如 .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`

打印显示：

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

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

Missing visible- and hidden- in Bootstrap v4

twitter-bootstrap

bootstrap-4

BOOTSTRAP 5

隐藏元素：

打印显示：

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

Missing visible-** and hidden-** in Bootstrap v4

twitter-bootstrap

bootstrap-4

BOOTSTRAP 5

隐藏元素：

打印显示：

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

Missing visible- and hidden- in Bootstrap v4