用ChatGPT解决这个技术问题 Extra ChatGPT

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

在 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 中有没有更好的方法来做到这一点？

Z
Zim

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 中隐藏特定层或断点上的元素，请使用 {4 } 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 (n/a 3.x) = d-none (与隐藏相同)

显示/隐藏断点及以上：

hidden-xs-up = d-none（与隐藏相同）

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 (only) = 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

可见-md（仅）= d-none d-md-block d-lg-none

可见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 上阅读更多信息

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

不幸的是，所有类 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 中，但它们也很有用并且应该是不言自明的。

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

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

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

例子是：

在比 lg 宽的屏幕上隐藏
在比 lg 小的屏幕上隐藏

更多这些here。

F
Faouzi

https://i.stack.imgur.com/zU6qm.png

来源：Meduim : Bootstrap 4 Hidden & Visible

以下是 Codeply 上 Medium 文章的实时链接：codeply.com/embed/…
N
Navid Naseri

引导 5

隐藏元素：

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

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

屏幕尺寸 Class Hidden on all .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 可见all .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-打印-无

.d-打印内联

.d-打印内联块

.d-打印块

.d-打印网格

.d-打印表

.d-打印表行

.d-打印表格单元格

.d-print-flex

.d-print-inline-flex

B
Bass Jobsen

我不认为多个 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;
  }
}
M
Michael Walter

用户 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 ，这在某些情况下会中断流程。
K
Kyle Selman

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

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

.hidden-xs-down

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

.hidden-xs-up

会隐藏一切

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

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

S
Scotty G

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

C
Creak Meng 
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>
S
Scott C Wilson

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

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

友情链接

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.