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

Question

在BootstrapV3中，我经常使用hidden-**类与clearfix相结合来控制不同屏幕宽度的多列布局。例如

我可以在一个DIV中组合多个hidden-**以使我的多列以不同的屏幕宽度正确显示。

举个例子，如果我想显示一行产品照片，在大屏幕上每行4张，在小屏幕上3张，然后在非常小的屏幕上2张。产品照片可能是不同的高度，所以我需要清除，以确保行正确中断。

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

http://jsbin.com/tosebayode/edit?html，css，输出

现在v4已经删除了这些类，并用可见/隐藏-***-up/down类替换了它们，我似乎不得不对多个div做同样的事情。

下面是v4中的一个类似示例。。。

http://jsbin.com/sagowihowa/edit?html，css，输出

因此，我已经从单div变成了必须添加多个div和许多up/down类来实现相同的功能。

从...

<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

引导v4。1使用新的类名隐藏网格系统中的列。

对于根据屏幕宽度隐藏列，请使用d-none类或任何d-{sm、md、lg、xl}-none类。要在特定屏幕大小上显示列，请将上述类与d-block或d-{sm、md、lg、xl}-block类组合。

例如：

html prettyprint-override"><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 2

不幸的是，所有类hidden-*-up和hidden-*-down都已从引导中删除（自引导版本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;
    } 
}

在Bootstrap 3中没有包含隐藏-除非-*类，但它们也很有用，应该是不言自明的。

Answer 3

Bootstrap 5的更新（2020年）

引导程序5（当前为alpha）有一个新的xxl断点。因此，显示类有一个新的层来支持这一点：

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

引导4（2018）

引导程序4中不再存在隐藏-*和可见-*类。如果要在Bootstrap 4中隐藏特定层或断点上的元素，请相应地使用d-*显示类。

请记住，extra-small/mobile（以前称为xs）是默认（隐含）断点，除非被更大的断点覆盖。因此，引导4中不再存在-xs中缀。

显示/隐藏断点和断点：

• hidden xs down（hidden xs）=d-none d-sm-block

显示/隐藏断点及以上位置：

• 隐藏-xs-up=d-无（同隐藏）
• 隐藏-sm-up=d-sm-无
• 隐藏-md-up=d-md-无
• 隐藏-lg-up=d-lg-无
• 隐藏-xl-up（n/a 3. x）=d-xl-无

仅显示/隐藏单个断点：

• hidden xs（仅限）=d-none d-sm-block（与hidden xs down相同）
• 隐藏sm（仅限）=d-block d-sm-none d-md-block
• 隐藏md（仅限）=d-block d-md-none d-lg-block
• hidden lg（仅限）=d-block d-lg-none d-xl-block
• 隐藏xl（n/a 3.x）=d-block d-xl-none
• visible xs（仅限）=d-block d-sm-none
• 可见sm（仅限）=d-none d-sm-block d-md-none
• visible 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

Bootstrap 4中响应显示类的演示

另外，请注意，可以将d-*-block替换为d-*-inline，d-*-flex，d-*-table-cell，d-*-table等。元素。阅读更多显示类