小开

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

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

.hidden-xs-down

会对xs和更小的部分隐藏吗，只有xs

.hidden-xs-up

会隐藏一切

小开

我不期望多个div是一个很好的解决方案。

我还认为你可以用.hidden-xs-down和.hidden-md-up替换.visible-sm-block(或.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时，情况就不同了。引导v4文档告诉你:

这些类不会尝试容纳不太常见的情况，其中an 元素的可见性不能表示为单个连续的范围视口断点大小的;你将需要使用自定义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;
}
}

小开

不幸的是，所有类hidden-*-up和hidden-*-down都从Bootstrap中删除了(截至Bootstrap版本4β，在版本4α和版本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中，但它们也很有用，应该是不言自明的。

小开

最佳答案

Bootstrap 5更新(2020年)

引导5(目前是alpha)有一个新的xxl断点。因此，显示类有一个新的层来支持:

只隐藏在xxl: d-xxl-none
仅在xxl: d-none d-xxl-block

上可见

Bootstrap 4 (2018)

Bootstrap 4中的hidden-*和visible-*类no longer exist .。如果你想在Bootstrap 4中的特定层或断点上隐藏一个元素，请相应地使用d-* < >强显示类< / >强。

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

显示/隐藏断点和向下:

__abc0 = __abc1
__abc0 = __abc1
__abc0 = __abc1
__abc0 = __abc1
hidden-xl-down (n/a 3.x) = d-none(与hidden相同)

显示/隐藏断点和向上:

hidden-xs-up = d-none(与hidden相同)
__abc0 = __abc1
__abc0 = __abc1
__abc0 = __abc1
hidden-xl-up (n/a 3.x) = d-xl-none

显示/隐藏仅用于单个断点:

hidden-xs(仅)= 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等。这取决于元素的显示类型。阅读更多关于d-*-inline0

小开

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

小开

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

小开

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>

更多这样的在这里。

小开

Bootstrap 4隐藏整个内容使用这个类“.d-none”，它将隐藏所有内容，而不考虑断点，就像之前的引导版本类“.hidden”一样

小开

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

来源:介质:Bootstrap 4 Hidden &可见

小开

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>

小开

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

小开

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

< / div >

打印显示:

使用打印显示实用工具类打印时更改元素的显示值。包括对与响应性.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中缺少visible-**和hidden-**

引导5

隐藏元素:

打印显示:

在Bootstrap v4中缺少visible-和hidden-