在Bootstrap v4中缺少可见**和隐藏** [英] Missing visible-** and hidden-** in Bootstrap v4

问题描述

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

In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example,

我可以在一个DIV中组合多个隐藏**，以使我的多列在不同的屏幕宽度下正确显示.

I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different screen widths.

例如，如果我要显示产品照片行，在较大的屏幕上每行显示4张，在较小的屏幕上每行显示3张，然后在非常小的屏幕上每行显示2张.产品照片的高度可能不同，因此我需要使用clearfix来确保行正确地断开.

As an example if I wanted to display rows of product photos, 4 per row on larger screen sizes, 3 on smaller screens, then 2 on very small screens. The product photos might be different heights so I need the clearfix to ensure the row breaks properly.

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

Here's an example in v3...

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

现在，v4取消了这些类，并用可见/隐藏**-上/下类代替了它们，我似乎不得不对多个DIV进行相同的操作.

Now that v4 has done away with these classes, and replaced them with the visible/hidden-**-up/down classes I seem to have to do the same thing with multiple DIVs instead.

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

Here's a similar example in v4...

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

所以我已经从单个DIV变为必须添加具有很多上/下类的多个DIV来实现相同的目的.

So I've gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.

来自...

<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中，还有更好的方法吗?

Is there a better way of doing this in v4 that I have overlooked?

推荐答案

Bootstrap 5的更新(2020)

Bootstrap 5(当前为Alpha版)具有一个新的 xxl断点.因此，显示类具有新的层来支持此操作:

Bootstrap 5 (currently alpha) has a new xxl breakpoint. Therefore display classes have a new tier to support this:

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

Hidden only on xxl: d-xxl-none
Visible only on xxl: d-none d-xxl-block

Bootstrap 4(2018)

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

The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly.

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

Remember that extra-small/mobile (formerly xs) is the default (implied) breakpoint, unless overridden by a larger breakpoint. Therefore, the -xs infix no longer exists in 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(不适用3.x)= d-none(与hidden相同)

• 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 (same as 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-up = d-none (same as 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 only for a single breakpoint:

• 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

• hidden-xs (only) = d-none d-sm-block (same as 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 等.取决于元素的显示类型.在显示类

Also, note that d-*-block can be replaced with d-*-inline, d-*-flex, d-*-table-cell, d-*-table etc.. depending on the display type of the element. Read more on the display classes

这篇关于在Bootstrap v4中缺少可见**和隐藏**的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！