Bootstrap v4 中缺少 visible-** 和 hidden-** [英] 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 中组合多个 hidden-** 以使我的多列在不同的屏幕宽度下正确显示.

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 转变为必须添加多个具有许多 up/down 类的 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

引导程序 4(2018 年)

hidden-* 和 visible-* 类在 Bootstrap 4 中不再存在.如果你想要要在 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 (n/a 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

显示/隐藏仅针对单个断点:

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

• 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 等等，取决于元素的显示类型.阅读有关显示类

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