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

Question

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

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

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

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

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

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

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

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

因此，我已经从单个 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 中有没有更好的方法来做到这一点？

score 914 · Accepted Answer

Bootstrap 5 (2020) 更新

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

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

引导程序 4 (2018)

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

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

显示/隐藏断点和向下：

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

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

另外，请注意，根据元素的显示类型，d-*-block可以用d-*-inline、d-*-flex、等替换。阅读有关显示类的更多信息d-*-table-celld-*-table

score 43 · Accepted Answer

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

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

我发现新方法在某些情况下用处不大。旧方法是隐藏元素，而新方法是显示元素。使用 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 中，但它们也很有用，应该是不言自明的。

score 29 · Accepted Answer

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>

更多这些在这里。

score 5 · Accepted Answer

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

来源：Meduim：Bootstrap 4 Hidden & Visible

score 4 · Accepted Answer

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

我还认为您可以替换.visible-sm-block为.hidden-xs-downand .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;
  }
}

score 4 · Accepted Answer

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

score 4 · Accepted Answer

引导 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-none`
仅在 xs 上隐藏	`.d-none .d-sm-block`
仅在 sm 上隐藏	`.d-sm-none .d-md-block`
仅在 md 上隐藏	`.d-md-none .d-lg-block`
仅在 lg 上隐藏	`.d-lg-none .d-xl-block`
仅在 xl 上隐藏	`.d-xl-none .d-xxl-block`
仅在 xxl 上隐藏	`.d-xxl-none`
全部可见	`.d-block`
仅在 xs 上可见	`.d-block .d-sm-none`
仅在 sm 上可见	`.d-none .d-sm-block .d-md-none`
仅在 md 上可见	`.d-none .d-md-block .d-lg-none`
仅在 lg 上可见	`.d-none .d-lg-block .d-xl-none`
仅在 xl 上可见	`.d-none .d-xl-block .d-xxl-none`
仅在 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

score 3 · Accepted Answer

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

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

.hidden-xs-down

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

.hidden-xs-up

会隐藏一切

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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>

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

12 回答 12

引导 5

隐藏元素：

打印显示：

Related

Reference

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