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

Question

在Bootstrap v3中,我经常使用隐藏的 - **类结合clearfix来控制不同屏幕宽度的多列布局.例如,

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

例如,如果我想显示产品照片的行数,则在较大屏幕尺寸上每行4个,在较小屏幕上每行4个,在非常小的屏幕上显示2个.产品照片可能是不同的高度,所以我需要clearfix以确保正确的行中断.

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

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

既然v4已经废除了这些类,并用可见/隐藏 - ** - 向上/向下类替换它们,我似乎不得不用多个DIV做同样的事情.

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

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

所以我已经从单个DIV转到必须添加多个具有大量上/下类的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中有没有更好的方法可以忽略我？

Answer 1

Bootstrap 4(2018)更新

在hidden-*和visible-*类不再存在,如果要隐藏特定层或断点的元素引导4,使用中的引导4. d-* 显示等级相应.

请记住,超小/移动(以前xs)是默认(隐含)断点,除非被更大的断点覆盖.因此,该-xs缀不再引导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-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 (不适用3.x)= d-xl-none

仅显示/隐藏单个断点:

• 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 (不适用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 (不适用3.x)= d-none d-xl-block

在Bootstrap 4中演示响应式显示类

此外,注意,d-*-block可以替换为d-*-inline,d-*-flex,d-*-table-cell,d-*-table等.取决于元件的显示类型.阅读有关显示类的更多信息

Answer 2

不幸的是所有类hidden-*-up,并hidden-*-down从引导删除(如引导版本4测试版,版本4阿尔法和版本3这些类仍然存在).

相反,d-*应该使用新类,如下所述:https://getbootstrap.com/docs/4.0/migration/#utilities

我发现新方法在某些情况下不太有用.旧方法是HIDE元素,而新方法是SHOW元素.使用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中,但它们也很有用,应该是不言自明的.

Answer 3

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>

更多这些在这里.

Answer 4

引导程序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

打印显示：

使用我们的打印显示实用程序类进行打印时更改元素的显示值。包括对与我们的响应式实用程序相同的显示值的支持.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

Answer 5

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

来源：Meduim：Bootstrap 4 Hidden & Visible