问题描述
在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 ashidden
)
显示/隐藏断点及上:
-
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 ashidden
)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 ashidden-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
也,请注意,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中缺少可见**和隐藏**的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!